Background image does not stretch completely

Question

I just launched the site the other day and thought it was free of weird CSS errors, but apparently not. What I'm trying to do here is to stretch the image so that it matches the page height and width.

Problem: I have the following markup:

<img src="images/night_sky7.jpg" class="stretch" /> 

and the following CSS is applied to it:

 img.stretch { left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; } 

This works fine on my 17.1-inch laptop with a resolution of 1440x900, but I noticed that it does not work properly at other screen resolutions. It happens that the background does not stretch to the bottom, but just below the bottom or even to the middle of the page.

Now I tried to change a lot of CSS, but I cannot stretch it completely.

Any help is appreciated.

URL to which you could test if you want: http://bit.ly/eOEzXJ .

If necessary, I can perform any of the following operations:

• Change image in Photoshop to any dimension
• Add JS or CSS, but height: 100%; the solution does not work, at least not the way I can see

Answer 1

Try to do this:

 body { height: 100%; } img.stretch { // your stuff height: 100% } 

I noticed that you also have a CSS wrapper class. You also need to add the following:

 #wrapper { height: 100%; } 

Answer 2

Chuck is on the right track here, but you may need to add

 html { height: 100%; } 

.

Answer 3

You can just set the height and width of the img tag in html to 100%

 <img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>