Two backgrounds on top of each other with CSS

Question

I have a div that I want to apply two backgrounds to it. Basically, I have one small picture that will repeat throughout the div, and the other large (without repeats). I tried to make two divs of the same size, superimposed on one another, and here is the CSS code that it works, but I want to do it in a more fashionable way.

.science_wrap{ background-image: url(../bg/graph-paper-background.png); width:100%; height: 694px; margin: 0 auto; 

}

 .science { background-image: url(../bg/prospectus-science-line.png); width:100%; height: 694px; margin: 0 auto; 

}

In addition, I have another div that will have one strip on top (I have a bg image for it) and I want to overlay another image on it, any tips or tricks to do this?

Answer 1

css3 has several backgrounds:

http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

However, older browsers do not support css3. In particular, IE8 and below do not support it - IE9 does.

You can use css3pie to force css3 in older versions of IE, but this can be a little slow and some of them are bugs.

If you need to support IE6, it is best to continue using the existing method, I think.

EDIT:

The syntax will look something like this:

 background-image: url(../bg/graph-paper-background.png), url(../bg/prospectus-science-line.png); background-repeat: no-repeat, repeat-y; 

Answer 2

You can use psuedo elements, for example: after or: before: http://jsfiddle.net/JUsXx/

Or you can use several CSS3 backgrounds: http://www.css3.info/preview/multiple-backgrounds/ (live example: <a2> )

Answer 3

CSS Pseudo: before and: after will help you here. They are also more compatible than multiple CSS3 backgrounds.

 .science_wrap { background-image: url(../bg/graph-paper-background.png); width:100%; height: 694px; margin: 0 auto; } .science_wrap:before { content:''; display:block; background-image: url(../bg/prospectus-science-line.png); width:100%; height: 694px; }