Footer overlay with an image - html

Question

I have a fullscreen cover background and I'm trying to get a footer over it which darkens the background. However I also need to put a picture on top of it which get darkened as well. I've tried to use z-index and sliced image with transparency but it was just blue and it 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 help much appreciated.
Edit:
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And 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;}

Answer 1

I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And 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;}

Answer 2

try adding
#footer { position: relative; z-index: 9999; }

Answer 3

Where exactly is this picture going? What div is it going into? Because right now if I'm understanding correctly, you just want a box which is on a layer above the background which has reduced opacity. [jsFiddle] Which it is technically already doing.
Can you give us the HTML markup as well? Or input it in a jsFiddle so we can see where the problem is.
Also if Z-indexes weren't working, make sure you are assigning a z-index to every element and not only the #footer.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
z-index: 999;
}
#img_div {
z-index: 1;
}