Transparent navigation bar with background image behind: css, no javascript

Question

A few newbies, but trying to do something, I thought it would be pretty simple; I would like to get a full-screen borderless background image that scales to the size of the screen (currently I use the background: cover), but I would like to place a translucent navigation bar on top of the image right on top containing a horizontal menu.

So far I have a navigation bar, but the image sits either above or below the navigation bar, and not directly from the top. What is the best way to do this, are z-index values, or is there something simple I have to do to put one div (.nav) on top of another (.background-img)?

any help is much appreciated, sorry if this is a bit vague, but I'm a complete newbie to html and css !!

Answer 1

Try using position:fixed;if you haven’t already. Do something like this:

div.background-img {
    background-image: url('background.png');
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
}
div.nav {
    position: fixed;
    background: rgba(255, 255, 255, 0.7);
    top: 0;
    left: 0;
    right:0;
    padding: 16px;
}

Watch the demo here