如何使背景图像适合整个页面而不重复使用普通的CSS？

Question

我有一个大小为1024 x 724的JPG图像.我的页面大小不固定.我的要求是:如果我调整页面大小,那么背景图像也应调整大小并适合页面.

另外,我不想在我的Html页面/ JSP中保留图像相关信息.我想用纯CSS做到这一点.我没有使用CSS3.因为有一个属性被调用background-size,可以使图像拉伸到页面宽度和高度.目前只有Google Chrome支持此功能.有帮助吗？

Answer 1

您无法使用CSS2调整背景图像的大小.

你可以做的是有一个容器调整大小:

<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.

Answer 2

尝试类似的东西

background: url(bgimage.jpg) no-repeat;
background-size: 100%;