Advertisement:

Author Topic: CSS stacking images  (Read 947 times)

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
CSS stacking images
« on: September 13, 2017, 01:25:13 PM »
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]

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?


Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #1 on: September 13, 2017, 01:43:24 PM »
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

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #2 on: September 13, 2017, 09:59:41 PM »
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.


Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #3 on: September 14, 2017, 06:38:57 AM »
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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #4 on: September 14, 2017, 04:43:45 PM »
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.


Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #5 on: September 14, 2017, 04:48:35 PM »
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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #6 on: September 14, 2017, 05:05:23 PM »
Works the same in IE11 and FF55.  It's doing what I want, just that the code is not consistent with css3 docs.

Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #7 on: September 14, 2017, 05:13:07 PM »
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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #8 on: September 15, 2017, 01:16:51 PM »
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.


Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #9 on: September 17, 2017, 06:41:44 PM »
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]

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. :P



Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #10 on: September 17, 2017, 07:29:23 PM »
You could use media queries and make it different just for mobile, may be a good mid-term solution :)

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #11 on: September 17, 2017, 11:37:19 PM »
Believe I saw a jquery fix that detects mobile, maybe give it a try.

Offline Gwenwyfar

  • Customization Team Apprentice
  • Full Member
  • ***
  • Posts: 588
  • Gender: Female
    • Gwenwyfar on GitHub
Re: CSS stacking images
« Reply #12 on: September 18, 2017, 08:07:56 AM »
If you want to go with device/OS detection. I meant css media queries though.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 6,914
  • Too long in the wasteland
Re: CSS stacking images
« Reply #13 on: September 18, 2017, 12:56:56 PM »
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.