How to keep background in fixed place while scrolling

问题

Here is the css

#bigwrapper{
    background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
    background-repeat: no-repeat;
    background-position: fixed;
    width: 100%;
}

Here is the html

<body id="bigwrapper">...</body>

As i scroll down i want to be able to keep the background image in the same place. I did this with my header and it worked, but hasn't worked out for the background image. Here is how i did it with my header

css below

.header1{
    position: fixed;
    width: 100%;
    margin: -100px auto;
    border: 1px solid blue;
    width: 1300px;
    margin-left: -8px;
    background: rgba(107, 168, 237, .8);
    background-position: center;
    opacity: 0.7;
}

html below

<div id="title" class="header1">
        <header><h1 ="title1" class="allTitle">The Water Project</h1></header>
</div>

回答1:

Use this style:

#bigwrapper {
    background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    width: 100%;
}

You have to use background-attachment: fixed;.

回答2:

WORKING DEMO

    background-attachment: fixed;

The above line will make the background image fixed.

#bigwrapper{
        background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
        background-repeat: no-repeat;
         background-position: top left;
         background-attachment: fixed;
        width: 100%;
    }

回答3:

Well, I was creating a fiddle, got sidetracked for a bit before posting, and it looks like others beat me to the punch. Just for the sake of doing something with what I worked on, here is the fiddle.

http://jsfiddle.net/lkritchey/867VX/3/embedded/result/

And like the others said, use

background-attachment: fixed

来源：https://stackoverflow.com/questions/23570727/how-to-keep-background-in-fixed-place-while-scrolling

标签

html

css

background-image