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!

font-size: 62.5%; /* Resets 1em to 10px */ does no such thing. — Sparr, Dec 31 '08 at 03:16
Yeah, sorry - that comment next to the attribute is vestigial. Thanks for pointing it out, you've reminded me to delete it! — , Dec 31 '08 at 03:21
"does no such thing" != "only does it about 97% of the time" — Andy Ford, Dec 31 '08 at 04:17
possible duplicate of [Can I have multiple background images using CSS?](http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) — Jon B, Sep 22 '10 at 20:50

score 7 · Answer 1 · answered Jan 04 '09 at 21:27

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;
}

score 5 · Answer 2 · answered Jan 08 '09 at 03:54

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.

This is a much more useful answer than the "accepted" answer. — Nathan Bowers, Jul 16 '10 at 21:51

score 4 · Accepted Answer · edited Jan 29 '11 at 09:44

4

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!

edited Jan 29 '11 at 09:44

badp

11,409
3
61
89

answered Dec 31 '08 at 03:16

I figured, but it was a hope! Thanks, I'll do it with a div block. – Dec 31 '08 at 03:19
1

No problem! Maybe CSS4 will introduce something like this? With the direction CSS & HTML are going, people want to use less and less HTML objects to use for styling the page. One can dream, right? :) – Dec 31 '08 at 03:29
2

Actually, in CSS3, via border images - see http://www.w3.org/TR/2002/WD-css3-border-20021107/ (AFAIK, only Safari and FF3.1 support this though) – Shog9 Dec 31 '08 at 03:57

score 1 · Answer 4 · answered Nov 15 '10 at 01:50

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.

score 1 · Answer 5 · answered Mar 23 '22 at 21:43

Ancient question here but the answer for this is the :after pseudo-element.

SCSS

body    {
  width: 100%;
  height: 100%;
  background: url(https://via.placeholder.com/200) repeat bottom left;
  &:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: url(https://via.placeholder.com/100) repeat bottom left;
    opacity: 0.5;
  }
}

CSS

body {
  width: 100%;
  height: 100%;
  background: url(https://via.placeholder.com/200) repeat bottom left;
}
body:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url(https://via.placeholder.com/100) repeat bottom left;
  opacity: 0.5;
}

score 0 · Answer 6 · answered Oct 25 '10 at 07:00

0

link text

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

answered Oct 25 '10 at 07:00

Assad Nazar

1,420
5
20
40

score 0 · Answer 7 · answered Dec 31 '08 at 03:12

0

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

answered Dec 31 '08 at 03:12

Will Bickford

5,381
2
30
45

score 0 · Answer 8 · answered Dec 31 '08 at 03:34

0

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

answered Dec 31 '08 at 03:34

codeinthehole

8,876
3
25
34

score 0 · Answer 9 · edited Nov 14 '11 at 14:22

0

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

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

edited Nov 14 '11 at 14:22

Jason Plank

2,336
5
31
40

answered Dec 31 '08 at 04:17

Andy Ford

8,410
3
26
36

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

9 Answers9

Linked