Question

重复背景图片时遇到了问题。

在内容非常短，比监视器高度短的情况下，背景图像仍在重复以获得额外空间。

请参阅截图。

橙色酒吧是我的页脚。底部灰色区域是额外的空间。

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

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

任何帮助将不胜感激。

My Image

Answer 1

您可以使用以下属性。

background-repeat:no-repeat;

有关详情，请参阅此site

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

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

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

我认为这就是你的意思。

Answer 2

不是将背景贴在身体上，而是在那里拍打另一个div并将背景放在那里。内部内容会将div推到正确的高度，并在此时停止（除非另有说明）。

例如：

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

并将重复的背景放在#background的css而不是你的身体上。

Answer 3

如果您可以在此处发布代码，那将是件好事。

尝试这样的事情：

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

Answer 4

background-size：封面；在样式领域尝试一下，它可以正常工作。

如何阻止背景图像重复空白空间？

4 个答案: