Question

我有一张背景图片，我希望沿着左边缘延长页面的长度。

这是我的css ......

body, html{
    height:100%;
}
#content{
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
    height:100%;   
}

效果很好：

good result

直到我的页面中的内容超过页面折叠线，此时如果我向下滚动，我得到这个：

bad result

所有内容都在id为“content”的div中。

思想？

Answer 1

您的#content元素的高度为100％，因此折叠以下的任何内容都不会在其中，但会溢出。您可以使用min-height来解决此问题。

#content {
    min-height: 100%;   
}

请记住，并非所有浏览器都支持min-height。特别是，这在IE6及以下版本中不起作用。您可以使用条件注释为IE6应用不同的样式，以便像以前一样设置height属性，由于渲染中的怪癖，它实际上应该按预期运行。

Answer 2

内容div没有像你想象的那样扩展。实际上，它只是扩展到它的父级的高度，依此类推......所以它的最大大小由body，html和window决定。试试这个：

body, html{
    height:100%;
}
body {
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
}
#content{
    height:100%;   
}

或者，只是

body {
    background: url(../images/leftBorder.png) repeat-y;
}

Answer 3

这个怎么样：

<强> CSS：

body {
    background: url('../images/leftBorder.png') repeat-y;
}
#noise-wrap {
    background: url('../images/noiseBackground.png') repeat-y;
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    z-index: -1;
}

<强> HTML：

<body>
    <div id="noise-wrap"></div>
    <!-- content -->
</body>

注意：您的“噪音”背景不会与页面的其余部分一起滚动。

Answer 4

您可以使用修复背景图片，因此每当您向下滚动时，它都会保留在原位

#content{
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
    height:100%;
    position:fixed;
}

简单明了

CSS背景重复问题

4 个答案: