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

Question

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

第一个背景我想覆盖页面的宽度（所以我使用了'cover'）我想不断重复的第二个背景。我试过以各种方式修改代码，这是我目前的代码（第一个 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;
            }
            }

我修复它的原因是因为我让它滚动、自动或以其他方式拉伸图像（因为图像比浏览器宽，所以它可以在其他设备上缩放 up/down...最终哈哈）

谢谢！斯科特

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 覆盖页面顶部，覆盖 window 的整个宽度和高度，然后随页面滚动。

JSfiddle

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

2 backgrounds, 1 covers the width, the other repeats, cant get em to work

html

css

background-image

CSS

HTML