CSS - CLASSIC] Put an image between main background and list/or in front of the list + animated overlays!
This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 You can add multiple backgrounds with this tutorial here, but it will use body. But if you want to use a separate code than body tho or put images in front of the list, you can use this nifty new code! Whats really cool is while this trick is possible with many other codes (but at the cost of using a code from another part of your layout) this code inline content is unused and won't take away from any other part of your layout! First I'll show you how to put it behind the list for a secondary background, then in front. There's a lot possibilities with this, but the main thing people do is use a repeating gif of snow, rain, or falling cherry blossoms in front of your main background or list to give it a cool weather effect. See it in effect here- This is how it looks without the code: and this is how it looks with it! A beautiful touch! Other things you can do is put a rendered image (like a character cut out with a transparent background) in front of your main background or list. Or you can put a translucent color over your background to give it a cool filtered look. Give it multiple images with the multiple background trick from this club! The code, add it to the bottom of your CSS: This entire CSS to the layout used in the example above is available here if you want it, it already includes the code: http://myanimelist.net/forum/?topicid=393471 Put an image in front of your list! Our user Erbaum puts inline content IN FRONT of the list! In his original code, it can create a sweet fading effect on your list! But you can do whatever you want with it. Take it further with multiple images from the club forum! This is the black fade it is in action, at the bottom of the pic: Black fade code: White fade code: How to move the Secondary Background in front of the list Just increase the Z-index to more than 1! Then an overlay will cover your entire list. This might seem like a bad idea since it will make it impossible to click the things (including the list) behind it. But there's a solution for some browsers, check the next post. Clicking through the foregrounds and overlays This is a code you can add to the bottom of your CSS to make them able to be clicked through in Firefox, Chrome, and Safari browsers. You wont be able to click through them in IE and Opera, as there's no way I know how to atm. So keep that in mind if you decide to put an overlay over your entire list. #inlineContent { pointer-events: none; } |
Shishio-kunSep 1, 2016 9:03 PM
| I personally use the #inlinecontent for a fade-thingo at the bottom of my list. Will this do the same kinda thing your talking about behind the list? body { background-image: url(image), url(image2), url(image3), url(image4); background-attachment:fixed; font-weight: light; background-position:bottom left, top right, top center,bottom left; background-repeat:no-repeat,no-repeat,repeat-y,no-repeat; background-color:#FFF; } Don't know if you can use .gifs like this though.. |
erlbaum said: I personally use the #inlinecontent for a fade-thingo at the bottom of my list. Will this do the same kinda thing your talking about behind the list? body { background-image: url(image), url(image2), url(image3), url(image4); background-attachment:fixed; font-weight: light; background-position:bottom left, top right, top center,bottom left; background-repeat:no-repeat,no-repeat,repeat-y,no-repeat; background-color:#FFF; } Don't know if you can use .gifs like this though.. I don't think so, it'd be worth a try, but usually the website will display the first thing in a set separated by commas, and if for some reason it can't it will use the second, and so forth. So I think it would only display one background at a time based on that rule. Its that rule for fonts. The way you use inline content is pretty smart, so I will add it to the top I think people will want a foreground as much as they want a double background. |
| The code erlbaum posted should work (in general), as specification of background has been modified in CSS3 to support multiple bgs. It also works with any image format you would normally expect from background. Example here at the bottom of page |
 |
| So yeah its layered, image1 will always be ontop of image 2 and so forth. It seems to be good for making gradient backgrounds, you can make a 2 x 2000 image and just repeat-x/y. Then slap a cut-out of some character in the corner. Ive tried it on opera/ff/chrome/safari on itouch and it seems to work. Just I.E doesn't read it properly (I dont expect there to be many people left using i.e anyway unless they are being hipsters or 60years+) Also Shishio could you fix that one error : Erbaulm |
| It works in IE9 btw so we can just say "upgrade your browser" |
|
| So it does. Forgive me for not updating to IE9 |
erlbaum said: I personally use the #inlinecontent for a fade-thingo at the bottom of my list. Will this do the same kinda thing your talking about behind the list? body { background-image: url(image), url(image2), url(image3), url(image4); background-attachment:fixed; font-weight: light; background-position:bottom left, top right, top center,bottom left; background-repeat:no-repeat,no-repeat,repeat-y,no-repeat; background-color:#FFF; } Don't know if you can use .gifs like this though.. I'll be damned it does work- amazing- I wonder if thats always been possible or if its just recent? In any case I'm real glad you brought that up cuz I used multiple backgrounds to make nifty layouts in the past like for my Veoh CSS group (scroll the page): http://www.veoh.com/list/c/veoh-custom-profile-community and now I can make something like that for my manga list! IE developers has really pulled their heads out of their asses in recent years, only a few years ago, when it was like IE6 times and earlier, coding a page for both IE and updated browsers like Firefox was a nightmare lol- IE was so far behind Firefox. Worst off, something like half the internet still used it. Now its way less, around 20%. Oh I see I added an "l" to your name, sorry about that. I hate it when people get my name or gender wrong haha I'll change it and keep it in mind, might give you a nickname in the future tho I usually do. |
| There should be a seizure warning for that link Shishio. |
| According to the information on the website I use for CSS help, it works in IE 9.0+; Crome 1.0+; Opera 10.5+; Safari 1.3+; FF 3.6+; So it seems like it's been possible for a year or so. When I was still working on my list, I decided to take a look on how IE9 would render it and SUDDENLY it worked as it should (in current style, however, there is still one IE-specific rendering 'mistake'). |
|
erlbaum said: There should be a seizure warning for that link Shishio. Thats how we do it in the da club lol. |
| If you're using this, I added a couple extra things you may be interested in. |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |