html - 2 个背景，1 个覆盖宽度，另一个重复，无法让它们工作

Question

这很奇怪，但我想在网页上有 2 个背景，第一个我想留在顶部(所以以正常方式滚动)，一旦你滚动，你就会得到第二个背景。

我想覆盖页面宽度的第一个背景(所以我使用了“覆盖”)我想不断重复的第二个背景。我试过以各种方式修改代码，这是我目前的代码(第一个 bg 是静态的，所以第二个 bg 目前从未见过!提示......)

            background-image: url(http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg); url(http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg);
            background-position: center top, center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-color:#464646;
            }
            }

我修复它的原因是因为我让它滚动、自动或以其他方式拉伸(stretch)图像(因为图像比浏览器宽，所以它可以在其他设备上放大/缩小...最终大声笑)

谢谢!斯科特

Answer 1

这是你想要做的事情吗？:

CSS

html, body{
    width:100%;
    height:100%;
    margin:0px;
    background-image:url('http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg');
    background-position: center top, center center;
    background-attachment: fixed;
    background-color:#464646;
}
#div1{
    background-image: url('http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg');
    background-position: center top, center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width:100%;
    height:100%;
}

HTML

<div id="div1"></div>

这实质上是用覆盖窗口整个宽度和高度的 div 覆盖页面顶部，然后随页面滚动。

JSfiddle