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         


        

Answer 1

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 2

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 3

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

Answer 4

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

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

Answer 5

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 6

link text

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