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

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.