CSS stacking images

[Sir Osis of Liver]

Trying this for first time, according to css docs 'Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one.'  I'm getting opposite result with this code -

Code Select Expand



background: #FDD961 url(../images/bg2b.jpg) fixed repeat-y;
background: #FDD961 url(../images/bg2.jpg) fixed no-repeat;
background-size: 100%;



bg2b.jpg is a filler to extend bg2.jpg (top image) vertically in mobile browsers.  Above code displays bg2.jpg on top, which is what I want.  If I reverse order, all I see is bg2b.jpg repeated vertically.  What am I missing?

[Gwenwyfar]

The syntax you are using will not stack backgrounds, it will replace the first with the second. For multiple backgrounds you define both in a single line, separated by commas.

This may help: CSS multiple backgrounds

[Sir Osis of Liver]

From your link -

"You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size."


Should work either way, but it's reversed.

[Gwenwyfar]

What is reversed?

Do note "as a list" means a comma list, not one property below the other (which just replaces the previous property with the latest, as anything else in css). Another property that allows lists like this is box-shadow and text-shadow, and it works the same way.

[Sir Osis of Liver]

The code I posted works correctly, first image is behind second image, as intended.  I've confirmed this by making top image transparent.  This is reversed, as per several explanations I found as to how this coding works (here's one).  First image should be on top.

[Gwenwyfar]

That sounds like off-spec behavior. Maybe even a bug as one property should replace another, not stack it. What browser are you using? It does not work like this on Firefox, and may be different elsewhere too.

[Sir Osis of Liver]

Works the same in IE11 and FF55.  It's doing what I want, just that the code is not consistent with css3 docs.

[Gwenwyfar]

I really don't know how is that even working. Are you sure you don't have another bit of code lingering somewhere? I'm using the same firefox version and it replaces the first background in my tests as expected. The css3 docs use a comma-separated list, so your code is not exactly following them. Do give the proper specs a try, that's what you should be using anyway.

[Sir Osis of Liver]

Will try it soon as I get a chance.  The code I posted works fine in IE and FF, but Kindle Silk only displays the correct top image and bg color, not the bottom filler image.

[Sir Osis of Liver]

Finally got around to looking at this.  Apparently it's not doable.  A fixed, repeating background image doesn't work in android browsers.  Ended up with this code -

Code Select Expand



body
{
background-image: url(../images/bg2.jpg), url(../images/bg2b.jpg);
background-repeat: no-repeat, repeat-y;
background-attachment: fixed fixed;
background-size: 100%, 100%;
font: 95%/90% Verdana, Helvetica, sans-serif;
margin: 0;
padding: 20px 0 4px 0;
}



It displays correctly in IE and FF, first image is on top, second repeats correctly under it, both are fixed.  In android, top image displays correctly, filler image streaks vertically below it.  If I remove background-attachment, both images display correctly, but neither is fixed.  If I use the second image alone and repeat-y, it displays ok until fixed is added, then it streaks vertically.  Can't fix just the top image.  Found a couple of references on stackoverflow that indicate this is a known problem, and workarounds don't look suitable for what I'm doing.  I can either have scrolling background in all browsers, or fixed that works in desktop browsers but has streaked bottom in mobile.  It actually doesn't look that bad, and I don't use mobile, so it won't bother me if I don't see it.

[Gwenwyfar]

You could use media queries and make it different just for mobile, may be a good mid-term solution

[Sir Osis of Liver]

Believe I saw a jquery fix that detects mobile, maybe give it a try.

[Gwenwyfar]

If you want to go with device/OS detection. I meant css media queries though.

[Sir Osis of Liver]

Think I'll just make a very long bg image, add the filler images to the bottom of top image.  Not an elegant way to do it, but will solve the problem.