This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 In the visual example below, you see a space background, a Rei Ayanami render, and glow along the bottom. All three are separate backgrounds in one selector (body). You add multiple urls and image links to a selector this way to have multiple backgrounds in it: body{ background-image: url(imagelink1), url(imagelink2), url(imagelink3); } The urls are in order of how they appear from front to back in the background- so the further back an imagelink is, the further back it is in the layout. The image for the first link in line will cover the second link's images then the third link's, and so forth. So the last image link in the row is the very last one on the page behind everything else. And remember the first images must be transparent or see through in some way, so that backgrounds can be seen behind them! PNGs and GIFs allow for transparency and opacity. Also, with the methods in post #2, you can set actual opacity code for each individual background. 3 backgrounds with same property  This is a version with the three background codes, as seen in the visual example. The codes for attachment, etc, all effect the backgrounds the same. Remember: the transparent and smaller images ALWAYS have to go in front of the other images in the code. You can add more backgrounds by adding a comment and new url() with a background image link in it. body { background-image: url(http://i41.tinypic.com/2ylwupd.jpg), url(http://i42.tinypic.com/avy10.jpg), url(http://i44.tinypic.com/1230egx.jpg); background-attachment: fixed; background-position: right bottom; background-repeat: no-repeat; background-color: black; } You can also do multiple background attachment and repeat settings as well in your code, which will be very useful (the first set here affects the first background in the set behind background-image and so forth). This sets properties for 3 backgrounds. Make sure you have properties set for each of your backgrounds, too. For example: background-position: right bottom, right top, right bottom; background-repeat: no-repeat, no-repeat, no-repeat; 3 backgrounds with their own properties (advanced) Here's an example of this at work in case you need help understand it. Code from example for easy testing Special thanks to Erlbaum for bring this trick to my attention! |
Shishio-kunSep 1, 2016 9:06 PM
| Another multiple backgrounds method (using body and inline content) The above examples put multiple backgrounds in one selector (like one section, body for example). But this example will put multiple backgrounds in different selectors that are all in the same place, to achieve roughly the same effect as above but with this you can customize each selector individually, with things like opacity and animation codes. You can try these codes on any layout. These work best with these particular selectors in the main background, or foreground. Multiple backgrounds in the main background, behind everything (using body:before/after) The first background code goes behind everything. The second code is in the middle. The last code is the closest to the front, but still behind the list. Multiple backgrounds in the main background, behind the list (inline content)  This is useful for when you want to add multiple renders in the background, as in the visual example. The first background (Asuka) code goes behind everything. The second code (Rei) is in the middle. The last code is behind the list but closest to it (the glow). Multiple backgrounds in the foreground, in front of the list (inline content)  Notice how the renders are in front of everything. Pointer events code makes it so the list and links can still be clicked thru these. The first image is Asuka (furthest behind) followed by Rei (middle) and last image is the white glow on the bottom (furthest in front). |
Shishio-kunJan 1, 2015 5:39 AM
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7812 |
by mtsRhea
»»
Apr 21, 5:25 AM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |