12

I've got 2 images as background of my body:

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

I found out that in order to show upper_bg.png above bg.png image I needed to place it first in the list. However for browsers that don't support multiple backgrounds I'd like to show just bg.png, I'm concerned that browser falls to upper_bg.png as a fallback instead of bg.png. How can I fix this issue?

Vukašin Manojlović
  • 2,645
  • 2
  • 21
  • 26
Ilja
  • 44,142
  • 92
  • 275
  • 498

1 Answers1

23

Simply adding a background declaration with just bg.png before the multiple backgrounds should do it:

background: url(../img/bg.png) repeat;
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

Older browsers will ignore the second line and keep the first line; they shouldn't attempt to use any part of the second line at all. Browsers that do support multiple backgrounds will use the second line instead of the first by overriding it as normal.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Could this work for fallback images where the image is unavailable? (e.g. profile images with a fallback silhouette, though using 404s during regular processing probably isn't canon) – rookie1024 Nov 14 '14 at 23:34
  • Would there be an extra request if we had a different image for the fallback? – nickspiel Nov 19 '14 at 21:34
  • @rookie1024: Unfortunately, no. IIRC there is a different proposal for providing fallbacks in case of unreachable images - which would require a different syntax that doesn't rely on cascading, since cascading is a different concept entirely. – BoltClock Nov 23 '14 at 06:52
  • @nickspiel: The browser only requests the image(s) that it ends up using. So in my answer, if the browser supports multiple images it will not request bg.png a second time. – BoltClock Nov 23 '14 at 06:53
  • The multiple background image support is surprisingly good, even IE9 supports it! http://caniuse.com/#search=multiple%20background – Jeremy Thille May 11 '16 at 07:27