Static background image with transparent content - html

Question

This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.

Answer 1

Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.

Answer 2

You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.

Answer 3

Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}