Question

I’m working on a webpage, and in it I use a background image that I would like to be stretched to the full width of the window, because I have text on it, which I want to be in a fixed position no matter what the screen resolution is. I’m looking for a CSS implementation, though if Javascript is my best bet, I will be wiling to use that.

Here’s what my page looks like: http://dl.dropbox.com/u/9134840/demo/windowsxp.html

Unless you’re using a 1080p monitor, the background image doesn’t fully extend from edge to edge, and leaves a little white space. Any help would be appreciated.

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

Use background-size property of CSS

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