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

Question

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

在内容非常短,比监视器高度短的情况下,背景图像仍然在重复额外的空间.

请参阅屏幕截图.

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

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

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

任何帮助将不胜感激.

我的形象 .

Answer 1

您可以使用以下属性.

background-repeat:no-repeat;

有关更多信息,请访问此站点

你也可以给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而不是你的身体.