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.


    CSS Howto..

    How can i integrate php to html table

    How to make rounded border in IE8 with CSS?

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How to remove this extra part at the right?

    How can I improve my webpage code to be scalable for smaller sizes?

    Bootstrap: how to stack divs of different heights?

    how to change height of ellipse in radial gradient in css for background property

    How would you explain CSS positioning to a human being?

    How to prevent bootstrap css class to override my custom css class

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    How to do something like #Card%{ } in CSS

    How to freeze frame with css

    How to achieve this header with html and css?

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    How to simplify CSS code

    Css, text shadow - How to get it overflow off the div

    How to combine two css3 gradients ?

    How can I use html tag in this javascript? [duplicate]

    How to I bring my sticky navbar in front of the contents on my page?

    How do I create a bar chart in CSS with an array of PHP float values?

    How do I get this div to be positioned below this search form?

    How to link an image in input text box using css

    How do I put a border: 1px solid #ddd around a selectbox using jQuery?

    How to add own icons in bootstrap navbar

    How can I achieve this transparency effect using css?

    How to make a different background for each link from a navbar? [closed]

    How to keep line breaks when using .text() method for jQuery?

    How to get element by its partial class name CSS

    hovering over list item, only one item showing up instead of all

    How to scale the image with css