How to set z-index in css background

Tags: html,css

Problem :

I have two backgrounds (calling from css), but first background is on full screen width and second is under it (is hidden). So I would like to set z-index, if it is possible. Do you know how to solve this problem? Thank you.

code

background-image:url("/images/background.png"), url("/images/fp_images/bg_image.png")

---

Solution :

You can't do what you want to do as you want to do it. css rules (z-index and background-image) are applied to the item. You can't say x rule applies to y rule, that's not how CSS works.

the only solution you have is to have two items with different background-image and then apply the z-index to these.

HTML

<div id="one"></div>
<div id="two"></div>

CSS

/*on top*/
#one{
background-image:url("/images/background.png");
z-index:10;
}

/*underneath*/
#two{
url("/images/fp_images/bg_image.png");
z-index:5;
}

You'll have to make the items sit underneath each other too, likely using float's but this will depend on your overall design.