html - 让图像根据浏览器大小重复自身

Question

所以我希望草在我的页脚上方从左到右填充。我很难让它重演。我将位置设置为固定，也浮动：离开但仍然没有运气。我会不断地将更多的图像硬编码到我的 HTML 中，但我觉得我可以使用 CSS 来做到这一点，并且不需要 100 行额外的代码。另外，如果用户使浏览器变大或变小，我希望图像可以增大或缩回。

现场演示

HTML

<figure>
        <img src="arrow.png" alt="arrow" class="arrow">
        <p class="clickHere"> Click one! </p>

        <img src="downwardmonkey.png" alt="down" class="head">
        <img alt="down" class="footer">
    </figure>

CSS

figure img.footer
{
    position: fixed;
    bottom: 45px;
    float: left;
    background-image: "grass.png";
    background-repeat: repeat-x;
}

如果需要任何其他代码来帮助让我知道！

Answer 1

而不是放置图像标签，而是放置一个 div 并为其提供背景图像

   <figure>
        <div class="grassImageDiv"></div>
   </figure>

CSS：

.grassImageDiv
{
    display: inline-block;
    background-image: url("grass.png");
    width:100%; //To make it browser size independent
    height: 80px;
}

您可以根据需要提供高度和宽度。