CSS or jQuery scalable background image with NO white space underneath when img height is less than window height
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. (e开发者_C百科xample: 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.
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
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>
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/
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/
Have you seen https://github.com/weightshift/The-Personal-Page ?
It uses the backstretch jQuery plugin that does the job quite well.
精彩评论