Comments on: Easy Full Screen Background Images with jQuery

By: Web Design Dorset

Web Design Dorset — Tue, 02 Feb 2010 00:26:37 +0000

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.

By: Scott Robbin

Scott Robbin — Mon, 01 Feb 2010 20:21:48 +0000

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.

By: Bill K.

Bill K. — Fri, 29 Jan 2010 01:25:07 +0000

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!

By: Bill K.

Bill K. — Thu, 28 Jan 2010 22:32:32 +0000

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

By: Michael Biven

Michael Biven — Tue, 26 Jan 2010 04:57:04 +0000

Scott,

This is exactly what I’ve been looking for almost all of last week. Thanks!

By: stephi

stephi — Fri, 22 Jan 2010 17:12:16 +0000

hi scott,
i was searching the web for this for weeks now.
great great great plugin! thank you

By: Scott Robbin

Scott Robbin — Fri, 22 Jan 2010 16:22:59 +0000

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!

By: Erik Kraft

Erik Kraft — Fri, 22 Jan 2010 01:28:52 +0000

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/

By: dlv

dlv — Thu, 21 Jan 2010 17:06:58 +0000

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!

By: Jamie

Jamie — Thu, 21 Jan 2010 16:57:22 +0000

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.