Body Height + CSS Background Images

If you’ve ever tried adding a background to the body element of a web page, you may have been a tad frustrated. By itself, the background will only cover the used portion of the page. If the height of the browser window is taller than the page, your background is cut short.

You might do something like this with your CSS:

body {
height:100%;
}

Doing this will solve your problem of the background  being cut short. However, it creates another issue. The background now stops at the bottom of the page, and does not continue as you scroll. Again, the background appears to be cut off.

So what to do? Try this instead.

body {
min-height:100%
}

Problem solved. Not the most shocking of all tips, but hopefully it releves someone’s headache.

Published by

Tim Bunch

Tim Bunch is a Web Developer from Boise, Idaho. As a web standards fanatic, he passionately pursues best practices. He also actively engages people on a wide range of topics in a variety of social media networks. Tim is also an avid Wordpress developer, music maker, coffee drinker, and child raiser. @timbunch

Leave a Reply

Your email address will not be published. Required fields are marked *