如何使用CSS将背景图像重新调整为窗口的完整宽度

Question

我在网页上工作,在其中我使用了一个背景图片,我希望将其拉伸到窗口的整个宽度,因为我有文字,我想要处于固定位置,无论什么屏幕分辨率是.我正在寻找一个CSS实现,但如果Javascript是我最好的选择,我会鼓励使用它.

这是我的页面的样子:http://dl.dropbox.com/u/9134840/demo/windowsxp.html

除非您使用1080p显示器,否则背景图像不会从边缘到边缘完全延伸,并留下一点空白.任何帮助,将不胜感激.

html {
}

body {
}

#img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position:absolute;
    top:180px; 
    left:350px;
    width:700px; 
    color:Purple;
    font-style:oblique;
    font-family:cursive;  
    text-shadow: 1px 1px;
}

#pre {
    position:absolute;
    top:280px; /* in conjunction with left property, decides the text position */
    left:150px;
    width:700px;
    font-size:large;
    font-family:cursive;
}

#header {
    position:absolute;
    top:530px; 
    left:450px;
    width:700px;
    font-size:x-large;
    font-family:cursive;
}

#sub {
    position:absolute;
    top:580px; 
    left:160px;
    width:1090px;
    font-size:x-large;
    font-family:cursive;
}

HTML

<div id="background">
<img src="back2.png" id="img" class="stretch" alt="" />

Answer 1

使用background-sizeCSS的属性

文档:https://developer.mozilla.org/en-US/docs/CSS/background-size