Question

I have a div that i want to apply two backgrounds to it. Basically I have one small picture that will be repeated all over the div, and another big one (no repeats).
I tried to make two divs of the same size layed one upon the other and here is the CSS code 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;

}

Also, i have another div which will have one strip on the top (i have a bg image for it) and I want to put upon it another picture, any tips or tricks to do this?

Answer 1

css3 has provision for multiple 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 support for css3 in older versions of IE, but it can be a little slow, and has some bugs.

If you need to support IE6 it is best to continue using your 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;