Html 如何停止背景图像重复空白空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12594476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop background image repeating for empty space?
提问by Aaroninau
Just ran into a problem with repeating background image.
刚刚遇到重复背景图像的问题。
In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space.
在内容很短，比显示器高度还短的情况下，背景图像仍然在重复多余的空间。
Please refer to the screenshot.
请参考截图。
Orange bar is my footer. The bottom grey area is the extra space.
橙色栏是我的页脚。底部的灰色区域是额外的空间。
Can I make stop the background image repeating for the bottom area?
我可以停止底部区域的背景图像重复吗？
I mean ideally the background image just repeats as long as my content.
我的意思是理想情况下，背景图像只要我的内容就会重复。
Any help will be appreciated.
任何帮助将不胜感激。
.
.
采纳答案by danielsan
Rather than sticking the background onto the body, slap another div in there and put the background onto that. The inner content will push the div to the right height and will stop at that point (unless otherwise stated).
与其将背景贴在身体上，不如在那里贴上另一个 div 并将背景放在上面。内部内容会将 div 推到正确的高度并在该点停止（除非另有说明）。
eg:
例如：
<!doctype html>
<html>
<body>
<div id="background">
Your inner content
</div>
</body>
</html>
and put your repeating background onto #backgroundin your css rather than your body.
并将你的重复背景放在#background你的 css 而不是你的身体上。
回答by Mr_Green
You can use the below property.
您可以使用以下属性。
background-repeat:no-repeat;
For more information go through this site
有关更多信息，请访问此站点
You can also give repeat-yor repeat-xto make the background-image repeat vertically or horizontally respectively.
您还可以分别给予repeat-y或repeat-x使背景图像垂直或水平重复。
If you want to give dimensions to your background image then you can use
如果你想给你的背景图片尺寸，那么你可以使用
background-size:100px 100px; /* width height */
I think this is what you mean.
我想这就是你的意思。
回答by Manoj De Mel
It would be good if you could post your code here.
如果你能在这里发布你的代码就好了。
Try something like this:
尝试这样的事情：
<div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both"></div>
</div>
<div class="footer"></div>
</div>
回答by Mo Sabry
background-size: cover; try this in the style sector, it works bro.
背景尺寸：封面；在风格部门试试这个，它的工作兄弟。
