2 backgrounds in one element

HTML & CSS
1

you know how its possible to setup a body background so that an image repeats, then when it stops repeating, a color fills the rest like this…


body {background: url(images/bg.jpg) repeat-x left top #FFFFF;}

well is it possible to have a different image fill the rest of the space after the first stops repeating? maybe something like this?


body {background: url(images/bg1.jpg) repeat-x left top url(images/bg2.jpg;}

please advise. thanks in advance.

2

CSS3 offers multiple background images, but it’s not supported in a lot of browsers at this stage.

3

thanks ralph. i’m confused though. the article does say “Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.”

so it IS or is NOT widely used?

4

IE8 and under don’t recognize it, and likewise older versions of the other browsers, which isn’t so much of a problem. IE8 and under is a big portion of the market.

5

stupid IE :mad:

gotcha. thank you!

6

Hello; I’m not sure if this would work in your case, but if you make a really tall skinny background; say, 5px wide x 2000px high, in photoshop you can color the top half red and the bottom half black and spanned across the page (repeat-x) it would show a black stripe along bottom and red on the top. Then it’s just one image. Hope this helps ? (I did it here: cocoslittleshop.com)

7

For now, as Ralph indicates, multiple backgrounds support isn’t quite universal. So a few nested elements would ben eeded. Would you need help with that?

@bzcasteel, that would work but if the page was resized or the viewing monitor was off (if the page is fluid at all) the top red background image could overlap content and not be desired. He’d be better off diving stuff up with different elements and putting images on them.

Edit-Wow it’s been a longgggg time since I’ve posted here. Hi everyone!

8
Off Topic:

welcome back Ryan :slight_smile:

9

Ans it has been mentioned before, multiple backgrounds are a feature of the relatively new CSS3 draft. However, like rounded corners, it seems to benefit from prolific implementation among most MODERN browsers: firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+). AFIK, you can stack up to 8 different bg images + 1 solid color.

One error you did make, that was not mentioned, is that backgrounds must be separated by commas.

body {background: url(images/bg1.jpg) repeat-x left top, url(images/bg2.jpg;}

It’s also important to note that tho you can use CSS3 gradients as backgrounds if you chose to to give a BG color say #ccc… it must be part the LAST BG listed

This won’t work

body {background: url(images/bg1.jpg) repeat-x left top, url(images/bg2.jpg) #ccc, url(image/anotherbg.jpg);}

This will

body {background: url(images/bg1.jpg) repeat-x left top, url(images/bg2.jpg) , url(image/anotherbg.jpg) #ccc;}

Remember that the images listed ware stacked in from first to last, that is first at top last at back.

Finally you can trick CSS2.1 to give you at most 3 bg images by using :before/:after pseudo elements and AP. This kinda limited in what it can do but it essentially supported by ALL ( you can use “filters” to add pseudo elements to IE<8)

Here is a good article on the technique ( minus the filters).

Hope it’s useful.