How to use 100% CSS background-image with scrolling content?

Question

I want to create a site with a background image that always fills the entire window, even if the content can scroll vertically.

I have created this JSFiddle using ba

Answer 1

Use background-attachment: fixed;

Demo

html { 
    height: 100%;
    margin:0px;
    background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

---

Also, I didn't got why you are using position: absolute; on the wrapper element, generally you should be using position: relative;

Answer 2

    #appcontainer {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.7);
        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;
        top: 0;
        right 0;
        left: 0;
        bottom 0;
    }

Answer 3

Add to your CSS:

background-attachment: fixed;