Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS vertical stretch to background

CSS vertical stretch to background

Problem

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%;}
Problem courtesy of: js111

Solution

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.

Solution courtesy of: jaypeagi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS vertical stretch to background

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×