CSS or jQuery scalable background image with NO white space underneath when img height is less than window height

jquery css image background scalable

technopeasant · Feb 22, 2011 · Viewed 7.8k times · Source

Oldie but goodie, I know. This question is asked so many times and yet I haven't had a definitive answer. Scalable background image, preferably CSS only, willing to use jQuery in support if it's a must. A problem I've run into a lot (i.e. with CSS3 background-image) is empty space underneath an image when it's height is less than the browser windows height. (example: http://css-tricks.com/examples/ImageToBackgroundImage/)

Here's what I'd like to accomplish:

Maintain aspect ratio
Clip image height and width if browser window is smaller than image size
Image centered on page so the clipping doesn't offset the flow of the page

Here are some examples illustrating these goals (though I think it can be done better):

Thank you, Thank you, Thank you.

Answer

You can use something like:

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

but it has browser incompatibilities.

.
Alternative solutions will force you to use HTML.

Examples:

CSS or jQuery scalable background image with NO white space underneath when img height is less than window height

Answer

Related questions