“There are many like it, but this one is mine.”
A recent Weightshift project, Central, brought about a few development challenges, one of which was background imagery. Naz had designed the page to include photography set behind the content. This raised questions:
- How would we deal with the additional weight of the images (~150–250K) without dragging down the page’s load time?
- Everyone’s browser window will be a different size. How do you determine what is the best/largest size to make the image, so that it fills the entire window?
- How do you account for images that are proportioned differently?
I did some research and found a few good solutions, though each had its limitations.
CSS-based solutions were straightforward, but didn’t address the requirement of triggering the download only after the page was ready. Javascript solutions addressed the page load requirement, but were often more complex than we needed and required the user to have prior knowledge of the image size (something that we couldn’t necessarily predict). The final solution was not novel, it was an amalgam of both solutions, implemented in Javascript.
Backstretch is a simple plugin recreated from the code used on Central, derived from the ideas presented in existing CSS and JS solutions. It is meant to be used by those who want a lightweight, minimalist implementation of dynamically-resized background images that can be executed in one line of Javascript, with nothing more than a link to an image.
Brilliant and timely for me Scott! Thank you for research and code. Was just experimenting with css options this morning. All of which so far have had some quirks.
mmm nice implementation, I like it… really easy to use and effective, I was looking the Centrla website..
thanks for share! added to my favourites scripts
adeux!
Ahhhhh Scott! I’m working on a design right now where this could come in super handy. I’ve used this technique before:
http://growmedia.ca/blog/2009/10/14/resizable-full-browser-background-image-with-jquery-preserving-aspect-ratio/
and it worked OK, but gave me some fits in IE. Will give your method a try on this current design. Which, incidentally, uses big desert vistas as the backdrops! http://clients.restlessbee.com/bgu/
Thanks, everyone. I’d love feedback once you’ve had a change to play with it, or if you notice any bugs.
Erik, thanks for the link to the Supersized plugin. I had forgotten to include that in my post as one of the reference implementations. Also, the Ben-Gurion mockups look great!
hi scott,
i was searching the web for this for weeks now.
great great great plugin! thank you
Scott,
This is exactly what I’ve been looking for almost all of last week. Thanks!
Great start to a sick plugin scott. Implements 100% in FF, but i’m lookin a bit buggy in IE8. I haven’t had a chance to test in any other browsers – i actually forgot about the bugs prior to the launch of my new design.. so it was a quick uh oh, when i viewed my published site..
Here is what we are looking at:
The initial page load in IE8 looks good however, further page loads will not render a background image.
IF you refresh the page, the background image will render correctly. I’m going to look into something i have heard of with the “onPageResize()” function i have seen before, but Jquery is not my strength!!
Anyone with ideas, please pass them on: Bill@bizlab.us
To see a live sample go to: http://www.bizlab.us. Use IE8.
Thanks people!!!
Bill
SO, after a little troubleshooting i found the issue to be with the >>
[code]
if(settings.hideUntilReady) img.hide();
[end code]
The hide function is setting the CSS display property to :none which is freaking out IE. I commented that out and the images will load 100% of the time, but the loading process is somewhat ugly.
I placed the call to >>
[code]
$.backstretch("images/index-bg.jpg", {speed: 500});
[end code]
>> inside the $doc ready fn and found that the page load was slightly less erratic. I would prefer the smooth load of the BG image though... i will work on this more tomorrow. Go to the site to see this version if you need to, at least the images display reliably now!
Thanks, Bill. When you find a good solution, I’d recommend forking my repository on GitHub, then issuing a pull request. Or, just let me know, and I’ll incorporate it.
Really useful little jQuery plugin. I would still advise making the background image as small as possible – say under 100K by applying some contrast/brightness adjustments and maybe .023 blur in Photoshop before saving the file out.