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

Question

Supposing I'm setting a background image for a web page in CSS like this:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?

Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?

Thanks!

Answer 1

In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.

Hope this helps!

Answer 2

Layered backgrounds are part of the CSS3 Working Draft but, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.

Using your example code, this would look like:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 3

I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.

As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback (check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.

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.

Answer 4

Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.

For the syntax you can choose between

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

and

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

You don't need the linebreaks, but the comma is important.

---

Attention! The following will create two backgrounds, even though you specified only one image url:

  background-image:url(..);
  background-position:top, bottom;

---

And of course, there is the alternative to use nested containers, but this will bloat your html.

Answer 5

The only way is to use another container. Each element may contain only one background image.

Answer 6

Use absolute positioning and a z-index to get the second element on top.

Answer 7

link text

Above mentioned link best describes what you r upto...

Answer 8

Don't forget you can apply styles to the HTML element:

html {
background: url(images/whatever.gif);
}