Fallback for css3 multiple background-images?

Question

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?

Answer 1

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.