How do I make a scrolling section become transparent over a fixed image?

Question

Introduction

I've read through your updates and there are still a few things that I'm not sure of. Firstly, I've no idea about dimensions of your images or your divs. You also have two classes that you've shown no rules for in your css. In fact if I were to run your code in a browser I'd get the following absolutely nothing showing up....

That being said, your description is more helpful:

I have a page section that has a fixed image as the background. When the page scrolls another page section scrolls on top of that image. I am trying to make the background transparent so you can see through to the image.

So I'm going to base this answer off of your description. That being:

A static/non-scrolling background image that is omnipresent

Creating a page with a static background

The way to do this is to attach the image as the background of the page container. Whether that be a div or the body tag (or some other tag - it doesn't matter).

For this example though, I'm going to attach the image as the background of the body tag.

HTML

For the example I'm going to create a page with multiple divs container inside of the body tag...

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

^^^ Doesn't get much more simple than that

CSS

This is where we make it look how we want it too... I have added several rules so that it displays properly and you can see how it works.

body{
    background:#3df url('path/to/image.jpg') no-repeat fixed center; /* Attach image to body with options of no-repeat, center, and fixed and a fall back colour of #3df */
    background-size: cover; /* Set background to cover the whole of the area that body takes up */
    width:100%; /* Set body width to 100% of view port */
    height:100%; /* Set body height to 100% of viewport */
    margin:0; /* Set margin to none - now white borders */
    padding:0; /* Set padding to none - no white borders */
}
div{
    background: rgba(0,0,0,0.5); /* Set default colour of divs to black at 50% opacity*/
    width:80%; /* Set width of all divs to 80% of viewport*/
    height:200px; /* Set height of all divs to 200 pixels */
    margin:auto; /* Center all divs on the page */
}
div:nth-child(even){
    background:rgba(255,255,255,0.5); /* Set every other div to white at 50% opacity */
}

Example

NOTE: I used a random image from the internet for demonstration purposes.

See it in action here: http://jsfiddle.net/65h7R/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creating a page with a static background</title>
    <style>

        body{
            background:#3df url('http://piccolor.com/wp-content/uploads/2014/02/Calm-Sea-Waves-wallpaper_7597.jpg') no-repeat fixed center;
            background-size: cover;
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }

        div{
            background: rgba(0,0,0,0.5);
            width:80%;
            height:200px;
            margin:auto;
        }
        div:nth-child(even){
            background:rgba(255,255,255,0.5);
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Follow up

I'm leaving this section till last because as I mentioned at the beginning I'm still not sure what you're code is supposed to be doing. However, if my understanding of it is correct then the reason why it is not working is relatively straight forward and has nothing to do with opacity.

You might have realised already after reading the first paragraph from the section above:

The way to do this is to attach the image as the background of the page container. Whether that be a div or the body tag (or some other tag - it doesn't matter).

From what I understand of your code you are attaching the background image to the first div in your page sections and not to a parent container. Therefore the image is only visible when the div in question is on the screen and is only visible beneath that element/div.

What you need to do to fix this is to attach the image to a parent div/container such as the body tag - as I have demonstrated above