如何使背景图像适合整个页面而不重复使用纯 css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4085287/
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 make the background image to fit into the whole page without repeating using plain css?
提问by User 1034
I have an JPG image with size 1024 x 724. My page size is not fixed. My requirement is: If I resize the page then the background image should also resize and fit to the page.
我有一个大小为 1024 x 724 的 JPG 图像。我的页面大小不固定。我的要求是：如果我调整页面大小，那么背景图像也应该调整大小并适合页面。
Also I don't want to keep the image related information in my Html page/JSP. I want to do this using plain CSS. I am not using CSS3. Because there is an attribute called background-sizewhich can make the image stretch to the page width and height. Currently only Google Chrome supports this.
Any help ?
另外我不想在我的 Html 页面/JSP 中保留图像相关信息。我想使用纯 CSS 来做到这一点。我没有使用 CSS3。因为有一个名为的属性background-size可以使图像拉伸到页面的宽度和高度。目前只有谷歌浏览器支持这个。有什么帮助吗？
回答by Ben
You can't resize background images with CSS2.
您无法使用 CSS2 调整背景图像的大小。
What you can do is have a container that resizes:
您可以做的是拥有一个可以调整大小的容器：
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>
This way, the divwill sit behind the page and take up the whole space, while resizing as needed. The imginside will automatically resize to fit the div.
这样，div将坐在页面后面并占据整个空间，同时根据需要调整大小。该img内部会自动调整以适应div。
回答by heximal
try something like
尝试类似
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
回答by Denilson Sá Maia
You can either use JavaScript or CSS3.
您可以使用 JavaScript 或 CSS3。
JavaScript solution:Use an absolute positioned <img>tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.
JavaScript 解决方案：使用绝对定位<img>标签并在页面加载时和页面调整大小时调整其大小。尝试获取页面/窗口大小时要小心可能的错误。
CSS3 solution:Use the CSS3 background-sizeproperty. You might use either 100% 100%or containor cover, depending on how you want the image to resize. Of course, this only works on modern browsers.
CSS3 解决方案：使用 CSS3 background-size属性。您可以使用100% 100%或contain或cover，具体取决于您希望如何调整图像大小。当然，这只适用于现代浏览器。
回答by james
Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.
根据您拥有的图像类型，最好重新设计设计，以便主图像淡化为设置的纯色或可重复的图案。如果您在页面中居中图像并以纯色作为背景。
See http://www.webdesignerwall.com/trends/80-large-background-websites/for examples of sites using large or scalable backgrounds.
有关使用大背景或可缩放背景的网站示例，请参阅http://www.webdesignerwall.com/trends/80-large-background-websites/。
回答by Ammad
These three line all together worked for me.
这三行都对我有用。
background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
回答by degee
background:url(bgimage.jpg) no-repeat; background-size: cover;
背景：网址（bgimage.jpg）不重复；背景尺寸：封面；
This did the trick
这成功了
