如何使背景图像适合整个页面而不重复使用纯CSS？
我有一个尺寸为 1024 x 724 的 JPG 图像。我的页面尺寸不固定。 我的要求是： 如果我调整页面大小，那么背景图像也应该调整大小并适合页面。
另外，我不想在我的 Html 页面/JSP 中保留图像相关信息。我想使用纯 CSS 来做到这一点。我没有使用CSS3。因为有一个叫做background-size的属性可以让图片拉伸到页面的宽度和高度。目前只有 Google Chrome 支持此功能。 有什么帮助吗？
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.
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-size which can make the image stretch to the page width and height. Currently only Google Chrome supports this.
Any help ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您无法使用 CSS2 调整背景图像的大小。
您可以做的是拥有一个可调整大小的容器：
这样，
div将位于页面后面并占据整个空间，同时根据需要调整大小。里面的img会自动调整大小以适应div。You can't resize background images with CSS2.
What you can do is have a container that resizes:
This way, the
divwill sit behind the page and take up the whole space, while resizing as needed. Theimginside will automatically resize to fit thediv.尝试类似的东西
try something like
您可以使用 JavaScript 或 CSS3。
JavaScript 解决方案：使用绝对定位的
![]()
CSS3解决方案：使用CSS3 background-size 属性。您可以使用
100% 100%或contain或cover，具体取决于您希望如何调整图像大小。当然，这只适用于现代浏览器。You can either use JavaScript or 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.CSS3 solution: Use the CSS3 background-size property. You might use either
100% 100%orcontainorcover, depending on how you want the image to resize. Of course, this only works on modern browsers.根据您拥有的图像类型，最好重新设计设计，使主图像淡入设定的纯色或可重复的图案。如果将图像置于页面中央并使用纯色作为背景。
请参阅http://www.webdesignerwall.com/trends/80-large-background -websites/ 用于使用大型或可缩放背景的网站示例。
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.
这三行一起为我工作。
These three line all together worked for me.
背景：url(bgimage.jpg) 不重复；
背景大小：封面；
这成功了
background:url(bgimage.jpg) no-repeat;
background-size: cover;
This did the trick