Question

这是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%;
}

这是html

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

当我向下滚动时，我希望能够将背景图像保持在同一个位置。我用我的标题做了这个并且它起作用了，但是还没有为背景图像设计。以下是我使用标题

的方法

以下

.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

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

Answer 1

使用此风格：

#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%;
}

您必须使用background-attachment: fixed;。

Answer 2

<强> WORKING DEMO

    background-attachment: 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%;
    }

Answer 3

好吧，我正在制作一个小提琴，在张贴前稍微偏离了一点，看起来其他人打败了我。只是为了与我的工作做点什么，这里是小提琴。

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

和其他人说的一样，使用

background-attachment: fixed

如何在滚动时将背景保持在固定的位置

3 个答案: