How to control multiple images for a single background definition

Question

In CSS, I'm trying to figure out how to individually control the size of 2 background images, stacked on top of each other. So in CSS, one could define 1 background image as such: background:url('base.png') no-repeat center;. In order to stack an overlay on top of a base image, you could use an approach as in fig.1.


    .my-class {
      background:
        url('overlay.png') no-repeat center, 
        url('base.png') no-repeat center;
      background-size: 100% 100%;
    }

fig.1

However, if I want slightly different sizes for each of the images, I'm not sure how to do that. I imagine the incantation to be a kind of inline position and dimension definition, as in fig.2. But I haven't gotten it quite right. Does anyone know how to do this? Thanks in advance.


    .my-class {
      background:
        url('overlay.png') no-repeat 0 0 / 100% 90%, 
        url('base.png') no-repeat center 0 0 / 100% 100%;
    }

fig.2

Have a look at http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css I'm assuming you could adjust the size as mentioned below by grapien — Mal, Mar 27 '13 at 05:23

score 2 · Accepted Answer · answered Mar 27 '13 at 05:14

2

I think you were almost there using CSS I believe that you can do it as follows:

   .my-class {
      background:
        url('overlay.png') no-repeat center, 
        url('base.png') no-repeat center;
      background-size: 90px 80px, 100px 100px;
    }

You just need the comma and then set the size of the second background.

answered Mar 27 '13 at 05:14

grapien

313
3
10

Sweeeet. Works like a charm. Thank-you friend :) – Nutritioustim Mar 27 '13 at 12:08
Not a problem I am glad I could help! – grapien Mar 27 '13 at 16:46

score 0 · Answer 2 · answered Mar 27 '13 at 05:10

It would be easier to set the background image into two different divs and then layer them with z-index.

DEMO: http://jsfiddle.net/vEMs4/

HTML:

<div id="bg1"></div>
<div id="bg2"></div>

CSS:

#bg1{
    position:absolute;
    top:0px;
    left:50px;
    height:200px;
    width:250px;
    background-color:blue;
    opacity:0.3;
    z-index:2;
}
#bg2{
    top:0px;
    left:0px;
    position:absolute;
    height:250px;
    width:250px;
    background-color:green;
    opacity:0.3;
    z-index:1;
}

In the demo I'm using background colours instead of images so you will need to adjust it appropriately for images.

How to control multiple images for a single background definition

2 Answers2