Background image not stretching fully

问题

I just launched a website the other day and thought it was free of weird CSS mistakes, but apparently it's not. What I am trying to do here is stretching an image to fit the page in height and width.

The problem: I have the following markup:

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

and the following CSS applied to it:

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

This is working fine on my 17.1' laptop with 1440x900 resolution, but I noticed it doesn't work properly on other screen resolutions. What happens is that the background does not stretch to the bottom, but to just below the bottom or even to the middle of the page.

Now, I've tried changing a lot of CSS, but I can't get it to fully stretch.

Any help is appreciated.

The url you could test on if you'd want is: http://bit.ly/eOEzXJ.

If necessary, I can do any of these things:

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

回答1:

Chuck's on the right track here, but you might need to add

html {
    height: 100%;
}

as well.

回答2:

Try doing this:

body {
   height: 100%;
}

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

I noticed you also have a wrapper CSS class. You'd also need to add this:

#wrapper {
   height: 100%;
}

回答3:

You might want to 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%"/>

来源：https://stackoverflow.com/questions/4379084/background-image-not-stretching-fully

标签

css

background

background-image