I am having an issue with adding a background image to my site header. The main content should cover part of the image, but even after setting the z-index, it's not working as expected.
You can view the website here
Any ideas why this might be happening?
Thank you!
Edit:
If you look on the right side of the page, you'll notice that the brown egg is not completely covered by the main content.
Here is the code for the header navigation:
.header-navigation.back {
z-index: -1;
position: absolute;
margin-left: 0;
margin-top: -6px;
border: none;
display: block;
height: 137px;
width: 1171px;
padding: 0px;
outline: none;
text-indent: -9999px;
background-image: url('http://frenchegg.com/images/backmenu.png');
}
And here is the styling for the main content:
.main-content {
z-index: 99;
position: relative;
padding: 1em 0 8.5em 0;
background: #fff;
}