网页背景

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

您已设置了repeat-y，因此当内容高度增加时它会重复。

尝试将体背景颜色设置为渐变中的第二种颜色，我认为它的＃845800。 然后删除repeat-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;
}