网页背景

Question

在我的项目中，我使用一个图像作为身体的背景。我在css中使用了以下代码：

body{
    /*background:#000;*/
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
    background:url(../images/stripBG.jpg);
    background-repeat: repeat-x repeat-y;
}

这个背景图像是条形的，我在x和y轴上重复，使它出现在整个页面上。但是当某些内容加载到我的页面后，在一定高度之后，背景又在重复。

​

如何使背景与我的动态内容兼容？

Answer 1

你可以这样做：

CSS

html, body {
    background: url(../images/stripBG.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
}

JS Fiddle

Answer 2

你已经设置了重复-y，所以它会随着内容高度的增加而重复。

尝试将身体背景色设置为渐变中的第二种颜色，我认为它是#845800。然后删除重复-y

body{
    background:#845800;
    margin:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
    background:url(../images/stripBG.jpg);
    background-repeat: repeat-x;
}