如何停止空白空间的背景图像重复？答案

【问题标题】：How to stop background image repeating for empty space?如何停止空白空间的背景图像重复？
【发布时间】：2012-09-26 04:17:31
【问题描述】：

刚刚遇到重复背景图片的问题。

在内容很短，比显示器高度短的情况下，背景图像仍然会为多余的空间重复。

请参考截图。

橙色条是我的页脚。底部灰色区域是多余的空间。

我可以停止底部区域的背景图像重复吗？

我的意思是理想情况下，只要我的内容重复，背景图像就会重复。

任何帮助将不胜感激。

.

【问题讨论】：

您能提供代码吗？似乎您可以只将背景图像赋予内容本身。
@UniAvenger 我同意。我从图片中假设背景图像被赋予身体而不是内容。您的解决方案应该解决这个问题。但源代码会有所帮助。

标签： html css repeat

【解决方案1】：

您可以使用以下属性。

background-repeat:no-repeat;

欲了解更多信息，请通过此site

您也可以给repeat-y 或repeat-x 分别使背景图像垂直或水平重复。

如果您想为背景图片指定尺寸，则可以使用

background-size:100px 100px; /* width height */

我想这就是你的意思。

【讨论】：

【解决方案2】：

与其将背景粘贴到主体上，不如在其中添加另一个 div 并将背景放在上面。内部内容会将 div 推到正确的高度并在该点停止（除非另有说明）。

例如：

<!doctype html>
<html>
<body>
    <div id="background">
        Your inner content
    </div>    
</body>
</html>

并将您的重复背景放在您的 css 中的 #background 上，而不是您的正文中。

【讨论】：

【解决方案3】：

如果你能把你的代码贴在这里就好了。

试试这样的：

<div>     
 <div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div style="clear:both"></div>
 </div>
 <div class="footer"></div>
</div>

【讨论】：

【解决方案4】：

在样式部分试试这个。

background-size: cover;
background-repeat:no-repeat;

【讨论】：

【解决方案5】：

您可以像这样直接在 CSS 制作中设置背景：

body {
 background: url(../images/background.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}

希望这会有所帮助：D

【讨论】：