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

使用CSS的background-size属性

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

Answer 2

您可以将宽度延伸超过100％。尝试的一种选择。否则我同意techfoobar，使用background css属性，特别是background-size。

Answer 3

为图像及其容器设置边距为0，宽度设置为100％。不需要使用<div>。例如：

body
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


#background
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


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

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

3 个答案: