CSS背景图像重复问题

Question

我正在尝试将背景图像重复x和y到页面底部。

背景图像模式div是

#pattern {    
    height: 3000px;
    width: 1000px;
    background:url(../images/patterns/pattern1.jpg) repeat;
    }

在html中，它位于

内

#wrapper {    
    position: relative;    
    width: 1000px;    
    margin: 0 auto;    
    text-align: left;    
    }

#pattern上的高度设置为3000px，因此会显示，否则图像不会出现。

我尝试了各种各样的事情，例如：

height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;

我希望背景图片重复到#wrapper的底部，到页面底部。

网页在这里：

非常感谢。

Answer 1

你已经在包装器上设置了一个固定的高度，所以无论有多少内容，它都会停在3000px。尝试最小高度。这将保持最小尺寸，以便它可见，但允许它增长以适应其中的内容。

Answer 2

尝试给#pattern一个position:fixed;因此无论你要滚动多少内容都无关紧要，它不会自动滚动。

Answer 3

旁注：repeat是背景图片的默认属性，因此无需声明。

Answer 4

你的HTML错了。 #pattern div应该包含页面的其余部分。你希望它与内容一起成长。

Answer 5

你的内部div都是绝对定位的，这使得它们无法影响容器#wrapper的高度，这是你想要放置背景图像代码的地方。

此外，我不确定这是否是故意的，但#pattern不会包装你的任何内容，因此它的高度必须手动设置，因为它没有子节点。

您可以采取两种方法。使用Javascript确定绝对定位的div的组合高度，并将模式的高度设置为该数字。

或者，您可以使用float来排列列，并在末尾添加

以强制父容器变高。

Answer 6

包含 #pattern 样式的 div 标记应从正文标记后的第一行开始，并在页面末尾关闭就在 body 标记结束之前。

BTW，删除 高度和宽度属性或将其设置为 100％，以便在整个过程中重复页面。