再努力一点点

没有烟抽的日子
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

设置页面的背景图片，并成拉伸成100%？

Posted on 2010-07-13 16:41  ZhangPeng.Chen  阅读(10718)  评论(1)    收藏  举报
设置页面的背景图片，并成拉伸成100%？

这是最近项目中碰到的一个需求，最先想到的当然还是css中的background，不过background中有repeat与no-repeat，图片小了就会被repeat，图片大了又不能全被显示，所以这个方法行不通。

换个方法<img />设置宽度与高度就可以被拉伸，所以就它了。
代码如下：
<html>
<head>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #container
        {
            position: relative;
            height: 100%;
        }
        #container-bg
        {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -999;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="container-bg" src="background.jpg" width="100%" height="100%" />
        Some text...
    </div>
</body>
</html>