div中的背景图像不重复？答案

【问题标题】：Background-image in div not repeating?div中的背景图像不重复？
【发布时间】：2021-08-07 18:27:16
【问题描述】：

我无法让图像在 HTML/CSS 中重复。我对此很陌生，所以我可能犯了一个基本错误，但我一生都无法弄清楚它是什么。

我在 index.html 中创建了一个 div

    ...
  <body>
     <div class="bakgrund"></div>
  </body>
    ...

还有我的 CSS 文件：

    .bakgrund {
  background-image: url("img/bakgrund.png");
  height: 200px;
  width: 200px;
}

图像只显示一次。我想要做的是让图像垂直和水平重复。当我在 body 标签中定义背景图像而不是作为 div 时，这可以完美地工作，这可能吗？

【问题讨论】：

您的图片是否高于/宽于 200 像素？
它实际上正好是 200px 宽和 200px 高，这有什么改变吗？
200px 不是很宽。您是否希望背景在整个身体中重复，而不仅仅是一个小 div？
它不能在这个尺寸上重复自己，因为它已经有了div的这个尺寸。
哦，现在我明白了！我希望它在全身重复，但它不能重复，因为它已经在一个固定的 div 中。一个好的解决方案是将 div 放大 10 倍，以适应 10 张图像？

标签： html css image divide

【解决方案1】：

如果您的背景图片尺寸大于 div 尺寸，请像这样设置背景尺寸。

.bakgrund {
    background-image: url("https://www.w3schools.com/cssref/paper.gif");
    background-repeat: repeat;
    height: 200px;
    width: 200px;
    background-size: 20px 20px;
}

<body>
     <div class="bakgrund"></div>
  </body>

【讨论】：

background-repeat的默认值已经重复
是的，我也是这么想的。我试图明确地添加它，但也没有用
我觉得你的图片可以大于200px
如果不能重复
添加这个没有任何区别。不仅重复默认值，而且它所应用的 div 很可能与图像一样小或更小。

【解决方案2】：

background-repeat的默认值已经是repeat但是如果你需要通过css in ...重复背景图片呢？ 试试这个

.bakgrund {
    background: url("img/bakgrund.png") repeat;
    height: 200px;
    width: 200px;
}

【讨论】：

因为重复是默认的，所以这里的答案不会添加任何东西。

【解决方案3】：

将此行添加到您的 CSS 文件中

background-repeat: repeat;

【讨论】：

background-repeat的默认值已经是repeat