有什么方法可以让HTML背景图像在高度变化后自动重复？

Question

我有一个关于HTML背景图像样式的问题。正如标题说的那样，如果可能的话，我怎么能让div的背景图像在div的高度改变之后继续重复呢？

例如，我有一个div：

#corkboard {
    background-image: url('images-2/corkboard.jpg');
    min-height: 500px;
}

背景图像corkboard.jpg只有340 * 340平方看上去像这样，当它被导入corkboard div时，它会自动重复和填充min-height: 500px部件，网页现在看起来是这样的。。

但是，当我向corkboard中添加子元素时，div高度自动地比min-height: 500px长得多，背景图像不会不断重复和填充新的高度，它总是停留在min-height: 500px，与最初的看上去像这样。相同。

我知道cover是如何工作的，但这不是我想要做的，因为cover扩展了这一张图像以覆盖整个背景，并使质量变差。我正在寻找一种方法，以保持自动重复更新与新的div大小。非常感谢你的帮助！

Answer 1

假设您在子节点上使用float属性，您可以这样做。

HTML结构

<div id="corkboard">
    <div class="corkboard__child">a</div>
    <div class="corkboard__child">b</div>
    <div class="corkboard__child">c</div>
    <div class="corkboard__child">d</div>
    <div class="corkboard__child">e</div>
    <div class="corkboard__child">f</div>
    <div class="corkboard__child">g</div>
    <div class="corkboard__child">h</div>
    <div class="corkboard__child">i</div>
    <div class="clear--both"></div>
</div>

CSS

#corkboard {
    background-image: url('images-2/corkboard.jpg');
    min-height: 500px;
}

.corkboard__child {
    width: 200px;
    height: 200px;
    float: left;
}

.clear--both {
    clear: both;
}

Answer 2

有背景-重复属性；公共值是

在x轴和y轴上重复

background-repeat: repeat;

只在x轴上重复

background-repeat: repeat-x;

只在y轴上重复

background-repeat: repeat-y;

一点也不重复

background-repeat: no-repeat;