Question

Is there a way to overlay/overlap two or more images using one div only? I wanted something like this in my css:

#nice_container {
    background: url('nice_background.jpg') repeat-y z(0);
    background: url('nice_logo.jpg') top left no-repeat z(1);
}

Where z(#) would be the z-index, then I would just use a nice <div id="nice_container">...</div>

EDIT

Thanks for the quick answers! Here’s the solution.

Answer 1

with css3 you can use multiple background in css

http://www.css3.info/preview/multiple-backgrounds/

but not every browser can handle it !
Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

Examples :

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

or:

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-   repeat, url(old_paper.jpg) left top no-repeat;
}

I suppose that the order you define the background images is the order of the stack