CODEWITHSUNDEEP
cssbackgroundbackground-image
Evert
Evert

Reputation: 376

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:

Upvotes: 3

Views: 4371

Answers (3)

Kobby
Kobby

Reputation: 590

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%"/>

Upvotes: 0

Chuck Callebs
Chuck Callebs

Reputation: 16441

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%;
}

Upvotes: 3

Rob Williams
Rob Williams

Reputation: 1470

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

html {
    height: 100%;
}

as well.

Upvotes: 3

Related Questions