I'm facing an issue with my fullscreen cover background. I want to overlay a footer that darkens the background, as well as place an image on top of it which also needs to be darkened. I attempted using z-index and a sliced image with transparency, but it just showed up as blue and didn't work.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
Any assistance would be greatly appreciated.
Edit:
To resolve the issue, I simply added another div element above with a negative margin without utilizing z-index at all.
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Have a question? Check out our <a href="#">FAQ</a></p>
</div>
And here is the CSS:
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}