how do I make the div content to scroll while the background stays

Question

Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.

see I don't want this to scroll http://codepen.io/anon/pen/gLCns/

see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window

Answer 1

you can use background-attachment: fixed; property to fix the background image.

html { 
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%; 
height:1020px;
left:20px;
top:20px;
}

Here is a Demo.

Answer 2

The background-attachment property is what controls if the background image scrolls or stays.

http://www.w3schools.com/cssref/pr_background-attachment.asp

So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.

Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.

Answer 3

OK, first your code is a mess. I recommend running your code through the w3 validator first.

You have two options to do what you want, either using the background fixed & cover that you already have answers for:

html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

or using overflow on the div with the content.

#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}