Footer overlay with an image

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 <a href="#">FAQ</a></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 <a href="#">FAQ</a></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

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;
}

Answer 3

try adding

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