home  blog  downloads 

Blog

Full screen, scaling and centered background with jQuery

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image?

It is possible with jQuery and the fullscreenr plugin on this page! You can find a demonstration here and as you can see it works perfectly in all javascript enabled browsers. Note that Internet Explorer needs some extra code to enable the transparent png used for the raster over the background image. If you want to add this code I would like to refer you to unitpngfix, but of course you could just not support IE6.

The code is quite self explanatory, and I’ve included comments where necessary.

Demo: http://nanotux.com/plugins/fullscreenr/index.html
Download: http://nanotux.com/plugins/fullscreenr.zip

comments
  1. Reader's Comments
    (would be great if you left one too!)
  2. Adeptus wrote on 30 Nov 2009 3:19

  3. Great plugin! Tnx!

  4. lonegro wrote on 26 Dec 2009 13:23

  5. have you try it in IE6?

  6. Michael Chu wrote on 13 Jan 2010 22:36

  7. hi, great plugin. i have a question regarding centering a div within the realBody div. so far, i am having trouble and any div’s within the realBody div will align to the left.

    thanks.

    mike

  8. sandro wrote on 14 Jan 2010 22:08

  9. Hi there !
    This plugin is awesome, very simple code and the perfect result :)
    By the way, is your material under any license ?
    Thanks and keep up the good work !

  10. Avin wrote on 25 Jan 2010 0:21

  11. Hey,
    really good and simple to use plugin, it does work in IE6 (remove the transparent raster overlay or fix it with a plugin).

    Thanks for sharing nanoTux.

  12. Matthijs wrote on 25 Jan 2010 11:35

  13. Thnxs! Looks nice!

  14. dwiekropki wrote on 19 Apr 2010 21:07

  15. love it! Thanks for sharing! greatings from Poland ;]

  16. Jose wrote on 20 Apr 2010 1:51

  17. Great plugin worked great

  18. Kreg wrote on 01 Aug 2010 19:24

  19. Best option. Thanks for this.

  20. Gautier wrote on 17 Aug 2010 17:27

  21. Hi, really great plugin, as I have been looking around ans so many, and i decided to adapt this one to my website and a jquery cycle slideshow, everything is working perfectly, until you are trying to resize the window on the second image in the slideshow and the handleft corner of the image get instantly positioned on the middle of the page, wonder if anybody encountered this?
    its actually running on my website now.

    Many thanks

  22. Roemer wrote on 17 Aug 2010 18:17

  23. Works On THE iPad!

  24. Achim wrote on 18 Aug 2010 21:41

  25. Thanks a lot for the great Plugin.
    It works super : )
    Best regards from Germany.

  26. barney wrote on 24 Aug 2010 10:52

  27. Great bit of script….for numerous months ive been searching and always come across bloated scripts, but this is very clean and simple

  28. Chris wrote on 11 Sep 2010 12:58

  29. Fantastic, exactly what my client wanted, thanks you’ve saved me hours of work :)

  30. shawnrice wrote on 30 Oct 2010 20:47

  31. fantastically easy to use.
    thanks.

  32. Anna wrote on 03 Nov 2010 5:39

  33. whats a fantastic plug in! thanks so much

  34. philism wrote on 05 Nov 2010 22:04

  35. Thanks super cool of you to share this

  36. ahmed said wrote on 07 Nov 2010 17:10

  37. nice fullscrennr ! i love how the contrast change on this lovely form ^^

  38. Brad Birdsall wrote on 09 Nov 2010 15:14

  39. Nice plugin… Some possible speed improvements http://pr-i.me/3A1N hope this helps :)

  1. Leave a Comment

  2. Name (required)

    Mail (will not be published) (required)

    Website