Question

I have the following structure in html5:

html
 - body
   - header
   - #wrapper
   - aside nav
   - footer

The header has 2 big divs with background images, one being logo and another being a sub logo.

The nav bar also has background image, and I just added a background to my wrapper, it needs to have a background image because the image needs to expand with the contents inside the wrapper. The wrapper also is positioned at margin-top : -105px so that a portion of the wrappers background goes under the logo and sublogo, since both of those are not 100% wide, the wrappers background shows on the sides, much like a paper page.

My problem is that the wrapper is at this moment, on top of logo and sublogo. I have tried adding a z-index of 10 to my header and z-index of -1 to the wrapper, but no luck.

What can I try to make the wrappers background image go behind the header?

Thank you.

Answer 1

z-index only works on elements that are positions:relative , absolute, or fixed.

Add position:relative; and a z-index to the logo and sub-logo .