CODEWITHSUNDEEP
htmlcss
Nutritioustim
Nutritioustim

Reputation: 2738

How to control multiple images for a single background definition

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

Upvotes: 1

Views: 2355

Answers (2)

grapien
grapien

Reputation: 323

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.

Upvotes: 2

Mal
Mal

Reputation: 580

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.

Upvotes: 0

Related Questions