ansaurus

Question

Can I have multiple background images using CSS?

Answer 1

A:

Short answer, no you can't.

scunliffe 2009-01-08 03:41:20

If you don't want to take the time to answer, then don't. And yes, he can have two (or more) background images. He didn't say he wanted them on one element. Really there is no reason to be snide.

Mahdi.Montgomery 2010-09-22 22:56:51

Sorry @Mahdi. M - I wasn't trying to be snide I was merely trying to answer the question. Although @Rudd Zwolinski didn't mention that there was only 1 element I presumed it was implied since you can have 500 background elements if you add more elements. (The duplicate link added 1min after my response points to a similar question about 1 element so I wasn't the only one making this presumption.) Otherwise I stand by my answer - currently there is no way in CSS to specify multiple background images... [for a single element],...

scunliffe 2010-09-23 10:24:48

... if you are willing to add more elements for every background image you want... then there are no limits.

scunliffe 2010-09-23 10:28:33

Answer 2

+1 A:

You could have a div for the top with one background and another for the main page, and seperate the page content between them or put the content in a floating div on another z-level. The way you are doing it may work but I doubt it will work across every browser you encounter.

Sean James 2009-01-08 03:44:13

Answer 3

+17 A:

CSS3 is going to allow this sort of thing and it'll look something like this:

body {
    background-image: url(images/bg.png) url(images/bgtop.png);
    background-repeat: repeat repeat-x;
}

but that doesn't work in pretty much any common browser today and could be years before IE implements it, and then even more years before enough people upgrade to that version.

The best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</div>

body {
    background-image: url(images/bg.png)
}
#bgTopDiv {
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

nickf 2009-01-08 03:45:22

Multiple backgrounds are supported by the latest versions of Firefox, Chrome, Safari and Opera. It will be supported in IE9, too. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

Šime Vidas 2010-10-30 23:44:56

Answer 4

+2 A:

Yes, it is possible, and has been implemented by popular usability testing website Silverback. If you look through the source code you can see that the background is made up of several images, placed on top of each other.

Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.

EnderMB 2009-01-08 03:51:09

Answer 5

A:

What are you guys talking about? You can actually have two background images without having to have another div. Just use background-image: url(), url(); background-repeat: background-position:

Erza_Scarlet 2010-10-22 09:23:11

Answer 6

+1 A:

Current version of FF and IE and some other browsers support multiple background images in a single CSS2 declaration. Look here http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ and here http://www.quirksmode.org/css/multiple_backgrounds.html and here http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

For IE, you might consider adding a behavior. Look here: http://css3pie.com/

Shannon 2010-10-30 23:00:16

ansaurus

tags:

views:

answers:

Can I have multiple background images using CSS?

Duplicate of: Layering images in CSS - possible to put 2 images in same element?

related questions