1

I'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.

Here is an image of what i'm seeing currently:

As you can see the div is behind the image and can only be seen becuase of the image opacity.

Any help would be greaty appreciated, thank you.

Xander
  • 991
  • 1
  • 13
  • 32
  • possible duplicate of http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning – Constantin Groß Feb 11 '17 at 17:32
  • @Connum I've read that but all my divs have a position attribute so I don't think that's the problem. – Xander Feb 11 '17 at 17:40
  • The first step in getting any help would be to create a [mcve]. Right now your `` tags have relative paths and are therefore not loading. – tao Feb 11 '17 at 17:47

2 Answers2

1

It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.

Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).

Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....

relic
  • 1,662
  • 1
  • 16
  • 24
  • Eventually fixed it thank ypu, wrapper was inside page so it was just page that had to have a higher index than the background. @relic – Xander Feb 11 '17 at 18:15
0

The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.

leuquim
  • 636
  • 6
  • 16