Background image with opacity and cover whole screen
<p>Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the <code>opacity</code> but the image won't cover the screen. </p>

<pre><code>&lt;div class="backgroundImage"&gt;
    &lt;img src="Image/BackgroundImage.jpg"&gt;
&lt;/div&gt;
</code></pre>

<hr>

<pre><code>.backgroundImage{
    opacity: 0.4;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</code></pre>

<p>However if I use the code below I can make it to cover the whole screen, but the <code>opacity</code> won't dip. So for some reason it is not working on a div. </p>

<pre><code>html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</code></pre>