Geek Answers Handbook

CSS or jQuery scalable background image with NO space at the bottom when img height is less than window height

Oldie, but a treat, I know. This question has been asked so many times, but I do not have a definitive answer. A scalable background image, preferably only CSS, wishing to use jQuery in support, if necessary. The problem that I came across in many ways (i.e. with CSS3 background image) is the empty space below the image when the height is less than the height of the browser window. (example: http://css-tricks.com/examples/ImageToBackgroundImage/ )

Here is what I would like to do:

  • Maintain aspect ratio
  • Clip height and width if browser window is smaller than image size
  • The image is centered on the page, so clipping does not bias the page flow

Here are some examples to illustrate these goals (although I think this can be done better):

Thank you thank you thank you.

+4
source share
5 answers

You can use something like:

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

but has browser incompatibility.

.
Alternative solutions will force you to use HTML.

Examples:

+1
source

Supersize was recommended by a friend - this is exactly what I was looking for! The main function is used instead of the slide show version. http://www.buildinternet.com/project/supersized/

+1
source

Here you go. Using jQuery. The IMG tag is set as a background image using position:absolute; z-indez:0; position:absolute; z-indez:0; . When 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 out the working example http://jsfiddle.net/LBvjR/

0
source

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>
0
source

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

It uses the backstretch jQuery plugin, which does the job well.

0
source

More articles:


All Articles