5

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.

Kai
  • 9,444
  • 6
  • 46
  • 61
technopeasant
  • 7,809
  • 31
  • 91
  • 149

5 Answers5

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:

Community
  • 1
  • 1
Meligy
  • 35,654
  • 11
  • 85
  • 109
1

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>
Obi-wan
  • 184
  • 1
  • 1
  • 6
1

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/

technopeasant
  • 7,809
  • 31
  • 91
  • 149
0

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/

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • Doesn't maintain aspect ratio – technopeasant Feb 22 '11 at 00:59
  • @daniel Image aspect depends on how you resize your window. Image cannot have 100% width and height and still maintain aspect ratio. What happens if you resize your window to 100px width by 600px height. How can width be 100px and height be 100% and still maintain aspect. We are expanding the img to fit 100% width and height of the window without any space as per your request – Hussein Feb 22 '11 at 01:18
  • I'd like the image to retain its original aspect ration and after a minimum size, start clipping the image. Here's an example of that, but clipping towards the top left: http://nooshu.com/explore/scalable-background/ I'd like to have it clip towards the center of the image. Possible? – technopeasant Feb 22 '11 at 06:06
  • @Daneil, To have it maintain aspect ratio as in your thakoon link about, we can set height to 100%. Width will vary. No need for javascript in this case.. Check http://jsfiddle.net/LBvjR/2/. This will make the image scale as the height of the window change and keep aspect ratio. – Hussein Feb 22 '11 at 09:24
0

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

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

zerolab
  • 826
  • 8
  • 17