Question

我在body标签后面有一个div重复的背景图片。我给了body和div一个100％的宽度和高度，因为即使没有足够的内容显示我想要在整个浏览器上显示该图像。

如果页面上没有滚动条，如果显示的内容很多，我需要向下滚动，背景图像会被破坏，然后是白色的。

任何帮助？

Answer 1

background-attachment: fixed;

background-attachment:fixed会将您的背景保持在固定位置，以便向下滚动时背景不会消失。

更新

在您的情况下，背景不附加到<body>，但是两个嵌套的子元素。我提出了两种可能的解决方案：

方法1：不更改HTML

目前的文件结构：

<body>
    <div id="mainbg">
        <div id="bg">

建议的CSS：

html, body { margin:0;padding:0; } /*Included in answer, because it's important*/
#mainbg {
    height: 100%;
    overflow: auto;
}
#bg {
    min-height: 100%;
}

方法2：推荐的解决方案：

将background（image）属性移动到<body>元素，然后移除<div id="mainbg">。

<body>
    <div id="bg">

CSS：

html, body { margin:0;padding:0; }
body {
    background: url(../images/main-bg-pat.png) 0 0;
}
#bg {
    min-height: 100%;
}

宽度和宽度高度

1 个答案:

更新

方法1：不更改HTML

方法2：推荐的解决方案：