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

Question

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):

• http://www.thakoon.com/collections/thakoon-addition/pre-fall-2011
• http://whatstheweather.net/weather/submit

Thank you, Thank you, Thank you.

Answer 1

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:

• Stretch and scale a CSS image in the background - with CSS only
• http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Answer 2

Here you go. Using jQuery. IMG tag is set as the background image by using position:absolute; z-indez:0; As you resize the window the image will resize accordingly. Cross browser compatible.

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})

Check working example at http://jsfiddle.net/LBvjR/

Answer 3

Was recommended Supersize by a friend- it was exactly what I was looking for! Used the core function instead of the slideshow version. http://www.buildinternet.com/project/supersized/

Answer 4

css:

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

html:

<div id="wallpaper"><img src="bg.jpg"></div>

Answer 5

Have you seen https://github.com/weightshift/The-Personal-Page ?

It uses the backstretch jQuery plugin that does the job quite well.