CSS背景图像重复问题答案

【问题标题】：CSS Background image repeat issueCSS背景图像重复问题
【发布时间】：2011-09-28 10:00:27
【问题描述】：

我正在尝试让背景图像在页面底部重复 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 上的高度设置为 3000 像素，这样它就会显示出来，否则图像不会出现。

我尝试了各种方法，例如：

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

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

网页在这里：

非常感谢。

【问题讨论】：

【解决方案1】：

您已在包装器上设置了固定高度，因此无论其中有多少内容，它都会停止在 3000 像素。尝试使用最小高度。这将使其保持在最小尺寸以便可见，但允许它增长以适应其中的内容。

【讨论】：

【解决方案2】：

尝试为#pattern 指定position:fixed;，这样无论您需要滚动多少内容，它都不会自行滚动。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的 HTML 是错误的。 #pattern div 应该包含页面的其余部分。你希望它随着内容的增长而增长。

【讨论】：

【解决方案5】：

您的内部 div 都是绝对定位的，因此它们不可能影响容器 #wrapper 的高度，这是您要放置背景图像代码的位置。

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

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

或者，您可以使用浮动来排列列，并在末尾放置一个

以强制父容器变得那么高。

【讨论】：

我现在已经将#pattern div 包裹在内容周围。听起来浮动 div 可能是最好的主意。如果列是浮动的，站点是否仍能保持相同的宽度？我想让列在页面上的相同位置而不是四处移动。我从未做过浮动 .div，所以我不确定会发生什么。
抱歉耽搁了。设置父 div 的固定宽度，浮动将自动排列在彼此旁边，填充空间。设置背景颜色以查看 DOM 框，然后到处玩，很快你就会明白浮动。记住在块元素（p 或 div）上使用“clear:both”css 样式后“清除”它们，如果这有帮助，请标记为已回答:)

【解决方案6】：

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

顺便说一句，删除 height 和 width 属性或将其设置为 100% 以便它在整个过程中重复页面。

【讨论】：