如何使背景图像适合整个页面，而不重复使用纯CSS？ [英] How to make the background image to fit into the whole page without repeating using plain css?

问题描述

我有一张JPG大小为1024 x 724的图片。我的页面大小不固定。
我的要求是：
如果我调整页面大小，那么背景图片也应该调整大小和适合页面。

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.

希望保持图像相关的信息在我的Html页面/ JSP。我想使用简单的CSS。我不使用CSS3。因为有一个名为 background-size 的属性，它可以使图像延伸到页面宽度和高度。目前只有Google Chrome支持此功能。
任何帮助？

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 ?

推荐答案

您无法使用CSS2调整背景图片的大小。

You can't resize background images with 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>

这样， div 页面并占据整个空间，同时根据需要调整大小。 img 里面会自动调整大小以适应 div 。

This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.

这篇关于如何使背景图像适合整个页面，而不重复使用纯CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！