如何使背景图像适合整个页面,而不重复使用纯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屋!