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 to position text over an image in css

    How do I keep floated child divs from wrapping?

    How to switch css table-cell from left to right?

    CSS: How to make an image-border

    How to stop breaking tables border when page is spliting?

    How to align image to top left of div

    how to make a navigation 100% width within an header wrapper

    How to make text wrap nicely below start of first line

    how to create horizontal drop-down menu with javascript for asp.net website?

    How to layout ASP.Net RadioButtons with Images?

    How to change CSS portrait to landscape in iphone?

    How to vertically align middle some header text between 2 header images on a website?

    How to disable CSS style relatively to a certain parent tag?

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    How to get width of div using jquery

    How to autoprefix css files generated by less, in Webstorm?

    How to remove the border on the hover element in nvd3

    How to add physics to CSS animations?

    How can I set the System.Web.Optimization bundler to correctly transform ISO unicode

    Selected text showing oversized selection area

    How add “cover”/“shadow” on div?

    JQuery: how to make this variable negative before declaring it as a CSS value?

    How to apply background color (or custom css class) to column in grid - ExtJs 4?

    Show required asterisk star after the text?

    How to select loose text between tags

    How to use a CSS Framework with Yesod?

    How to apply External CSS to Html Helper Class Elements?

    How to organize CSS Sheets [closed]

    How to make two tooltip ids independently close, and remember cookie?

    jQuery how to select children first level div's