CSS vertical stretch to background

Question

I cannot seem to get my background image to stretch vertically (with CSS) and have not been able to get it.. What's the best way to do this without using a jquery plugin?

http://realestateunusual.com/

Currently have

div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}

FYI, in the future, please be sure to look at similar questions which already exist here - such as http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only?rq=1. — KatieK, Jul 15 '12 at 21:52

jaypeagi · Accepted Answer · 2012-07-15T21:58:36.120

Although the question is unclear, I assume you want the houses to appear at the bottom of the page?

The body does not fill the screen unless it has to. Thus, your whitewrap div only fills 100% of the body.

Either you need to set the body height to 100% too (although this is slightly hacky) or set the background of the body to the image. This will then have the background image at the bottom of the screen (despite the body not being the full height - confusing right?).

Your HTML is hard to inspect however, due (I assume) to the software you used to create it adding in more divs than I thought possible!

EDIT: after closer inspection, it looks as if you need to set the background-position attribute to force the image to the bottom. Then, you can set the background-color to be the same as the colour of the sky at the top of the image. This should create the effect you desire without having to actually stretch & distort your image.

The crazy HTML is from the live chat plugin..Setting body to 100% does not seem to do it.. — js111, Jul 15 '12 at 21:49

score 1 · Answer 2 · answered Jul 15 '12 at 21:50

1

You can do this completely using CSS: using the background-size attribute.

body {
    background-image: url(http://placekitten.com/250/150);
    background-size: 100%;
    }

See http://jsfiddle.net/5TSVP/.

answered Jul 15 '12 at 21:50

KatieK

13,586
17
76
90

score 0 · Answer 3 · answered Jul 15 '12 at 21:45

You should look into Media Queries in your CSS and store different resolution images for major platforms. The images can then resize between with browser.

Media Queries: http://www.w3.org/TR/css3-mediaqueries/

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

CSS for img tag to let it resize:

img { max-width:100%; }

CSS vertical stretch to background

3 Answers3