This website uses cookies to personalise ads and to analyse traffic ok
web design

Fullscreen background image with jQuery

Set an image as fullscreen background in your html document, that is centered and proportionally scaled according to browser window.

Load the jquery library straight from Google’s CDN in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance).

Add the markup of your background image

<div id="bg">
    <img src="image-name.jpg" width="1280" height="800" id="bgimg" />
</div>

Change the source attribute image-name.jpg to your image path and set its actual width and height attributes.

The css for the image container:

body{margin:0px; padding:0px; background:#000;}
#bg{position:fixed; z-index:1; overflow:hidden;}

Next we need to insert the actual function that does all the work of streching proportionaly and centering our image. So after the jquery inclusion insert:

<script type="text/javascript">
function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
}
</script>

This function makes our image width and height stretch, depending on the browser and image dimensions ratio.

Finally, insert the functions that check when our page is loaded and browser is resized:

<script type="text/javascript">
window.onload = function () {
FullScreenBackground('#bgimg');
}
$(window).resize(function() {
FullScreenBackground('#bgimg');
});
</script>

31 Comments

Post a comment
  1. Michael Bertelsen
    Posted on February 1, 2012 at 17:52 Permalink

    Hey – this is very nice, thank you! However i need something a bit different and i was wondering if you could point me in the right direction or maybe even code it if you like the idea. ๐Ÿ™‚

    I want a full screen picture as this when you enter site no matter the size of your browser window. But i also want to be able to scroll down so i kinda use the full screen image as a form for intro but text etc. should only come once i scroll down.

    I saw this effect here: http://www.wearetheweather.co.uk/ but i cant seem to find any scripts etc. that will do this trick for me. any help is appreciated!

    Reply
    • Lang
      Posted on September 27, 2013 at 06:04 Permalink

      I want a full screen picture as this when you enter site no matter the size of your browser window. But i also want to be able to scroll down so i kinda use the full screen image as a form for intro but text etc. should only come once i scroll down.

      Reply
  2. Sheel
    Posted on October 10, 2011 at 01:04 Permalink

    Hey Malihu!

    I’ve used your tweak for the background scaling on Mary Lou’s Codrop tutorial (the fullscreen thumbnail navigation one).

    I’m having trouble with getting the script to perfectly understand my images. I’ve noticed that images with an unsual aspect ratio will more or less not scale properly at all (for example a picture with height 800px and width 200 px). Here’s an example http://joacimeldre.com/interactive/test

    Is there any way to make the script understand and keep the original image aspect ratio? I know it would probably mean getting a “cutoff” with a simple background on for example the bottom or the right side, but that doesn’t matter.

    Either way, thanks for the help this tweak has given – I’m far from experienced enough to dive into this on my own.

    Reply
  3. Strangelove
    Posted on August 25, 2011 at 01:22 Permalink

    Hello Malihu

    Your work’s much appreciated, I’ve found it very useful in creating a portfolio site!

    I have one problem though: My background images are not centered straight away upon loading the page; they only center once the window gets resized manually. I tried adding:

    $(window).onload(function() {
    FullScreenBackground(‘img.st_preview’);
    });

    …but it still doesn’t work. Any idea why?

    Many thanks!

    Reply
    • Strangelove
      Posted on August 25, 2011 at 02:25 Permalink

      Actually, I noticed that it’s missing from your edit of Mary Lou’s script as well… See, when I open your index.html and then resize the window, the background image jumps suddenly because the centering doesn’t take effect until a window.resize happens. Do you have an easy fix for this?

      All in all, excellent work! Keep it up!

      Reply
  4. Sousou
    Posted on August 21, 2011 at 10:51 Permalink

    Hello, is there a way to have a fullscreen background and have a table in the midle of the page centred? to load content

    Thank you

    Reply
    • malihu
      Posted on August 21, 2011 at 14:41 Permalink

      Hi,
      Placing your content (a table or anything you want) in the html and giving it a z-index of 2 will do the trick.
      If you know the exact height of your content, you can center it vertically easily by adding few simple CSS rules. For instance if your content height is say 400 pixels, you can do the following:
      .content { position: absolute; height: 400px; top: 50%; margin-top: -200px; }

      You can also center it horizontally by defining left and right margin to auto:
      margin: -200px auto 0 auto;

      If you don’t know the height of your content and still need to center it vertically you’d need to implement some jquery like this:
      http://manos.malihu.gr/center-div-with-jquery

      Reply
      • Marc
        Posted on March 23, 2012 at 15:49 Permalink

        Hello, This is a great scrip (easy explained) and it works perfectly only I bummed into a little problem.

        I’m using the PHP tag in my website.

        But using this makes the z-index don’t work anymore, it will place the content behind the background image.

        And if you take a look at the source code the include tag is not even in there anymore.

        Do you know what I’m doing wrong here.

        thanks for your help….

        Reply
  5. aga
    Posted on May 22, 2011 at 00:50 Permalink

    Hi malihu!

    Great stuff you’re doing here!

    I wanted to use the fullscreen background script with the fade in effect, but it’s not working in IE9 and Opera. Is there any way to get it to work?

    Thanks a bunch!

    Reply
    • malihu
      Posted on May 22, 2011 at 16:29 Permalink

      Check this:
      http://manos.malihu.gr/fullscreen-background-image-inside-frame-with-jquery

      It’s pretty much the same script with a margin-frame (which you can remove), a preloader animation and a fade-in effect ๐Ÿ˜‰

      Reply
      • aga
        Posted on May 27, 2011 at 03:35 Permalink

        Thanks so much! It worked for IE but still no Opera. Then again, I guess I can live with that…

        I now have another question, though. I was also using your custom scroller script “jquery.mCustomScrollbar.js” and it’s giving me a conflict with “prototype.js”. I tried using the jQuery.noConflict(); solution, but it’s not working. Any tips on how I can remove the conflict?

        Again, thank you, thank you, thank you!

        Reply
  6. k
    Posted on November 1, 2010 at 11:07 Permalink

    bro, my fren play with the http://manos.malihu.gr/tuts/ThumbnailsNavigationGallery_EditedByMalihu.zip and discover ie6 has serious problem after the fullscreen script added in. you will notice it auto double up browser size (enlarge to bottom) when you click on thumb image.

    In other words, you notice another image appear at the bottom of browser when you click on thumb. he wish to use the codrop with your fullscreen solution. arigato.

    Reply
    • malihu
      Posted on November 2, 2010 at 01:07 Permalink

      The “thumbnails navigation gallery” is a script created by codrops (http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/). I just added my fullscreen background function after some user requests made on codrops site and this blog, so I don’t really know if the original script was working in IE6 or not.

      Moreover I do not code/support or test any of the scripts in IE6 cause it’s an endless cycle of pain that’s just not worth the time and effort. Why would you care for IE6 anyway?

      Reply
      • k
        Posted on November 2, 2010 at 06:29 Permalink

        i understand and appreciate all your effort/help to all reader. i from malaysia, ie(6-8) itself still occupy about 60-70% our market share with ie6 about 20-30% market share. we have ppl using chrome, firefox, ie even ie6.

        but dont worry, no problem for the codrop, it is their disability on ie6 anyway. thanks alot.

        Reply
  7. k
    Posted on October 27, 2010 at 17:55 Permalink

    you have all the great tutorial/ideas with great explanation. appreciate it very much. is there any way to implement this fullscreen ideas to your “ANIMATE PAGE TO ID WITH JQUERY”(each animate page now change to pictures and each picture auto fit to fullscreen)?

    thanks.

    Reply
    • malihu
      Posted on October 29, 2010 at 20:27 Permalink

      I plan to make a single page template with page animation and fullscreen background images so keep checking for new posts!

      Reply
      • k
        Posted on November 1, 2010 at 08:28 Permalink

        Thanks for your sharing. Due to my limited knowledge, when i use the “animate page to id with jquery” with fullscreen, 2 issues appear. 1st, the sliding not smooth and the fullscreen only happen on 1st page.

        I tried the ThumbnailNavi file as in comment section, it work well in chrome just the commonly know problem browser ie6 dun display well. THanks alot for all tut, wait for your new tut.

        Reply
  8. Antonio Salvador Jim
    Posted on October 13, 2010 at 19:52 Permalink

    Thanks for share! , i will try it!
    Regards from spain

    Reply
  9. Pierre
    Posted on September 9, 2010 at 17:07 Permalink

    hi, thanks a lot to share your work, it’s a cool code.
    I tried the demo with the start fading effect, but it’s seems to be broken!
    I’m a begginer in javascript and i don’t know why.
    Any idea?

    if you can help me ,
    thanks in advance! ๐Ÿ™‚
    Pierre

    Reply
    • Pierre
      Posted on September 9, 2010 at 17:20 Permalink

      Ouch finally it work! sorry ๐Ÿ˜‰

      Reply
  10. Rocky
    Posted on September 6, 2010 at 09:58 Permalink

    hey it is amazing but if i want to change the background images like a slide then is there is any possibility???

    Reply
    • malihu
      Posted on September 6, 2010 at 11:57 Permalink

      This script deals only with the fullscreen image scaling and positioning. A fullscreen slideshow is another story…

      Reply
  11. christy
    Posted on August 23, 2010 at 21:07 Permalink

    Yes no more errors!
    Thank you for your time~ much appreciated:D

    Reply
  12. christy
    Posted on August 13, 2010 at 23:55 Permalink

    Hi, thank you for your script.
    I’m using the above script you’ve modified(ThumbnailsNavigationGallery_EditedByMalihu.zip), but I’m getting an error on IE7 & 8.
    Seems like it’s coming from this line: $(theItem).css(“width”,picWidth*winHeight) and I have no idea what’s wrong with it. Could you please help?

    Reply
    • malihu
      Posted on August 14, 2010 at 00:42 Permalink

      Hi ๐Ÿ™‚

      Unfortunately I won’t be able to check it untill next week cause I’m abroad. As soon as I come back I’ll check it and let you know.

      Reply
      • christy
        Posted on August 14, 2010 at 00:43 Permalink

        ok thank you, I’ll wait=)

        Reply
    • malihu
      Posted on August 22, 2010 at 16:17 Permalink

      Hello again christy

      Please remove line 163 (“FullScreenBackground(this);”). You should get no script error in IE ๐Ÿ™‚

      Also updated the files at http://manos.malihu.gr/tuts/ThumbnailsNavigationGallery_EditedByMalihu.zip

      Reply
  13. Philip
    Posted on August 7, 2010 at 09:59 Permalink

    i’m very thankful for your help,
    you are a genius my friend!!!!

    thanks a lot for your time!

    all the best to your life and your upcoming projects!!!

    Reply
    • malihu
      Posted on August 6, 2010 at 19:05 Permalink

      Kalispera ๐Ÿ™‚

      About Mary Lou’s script I think you’d have to change a bit the css of “st_main” and “st_preview” by removing the “top” and “left” values. Then you should run the FullScreenBackground function shown in this post (e.g. FullScreenBackground(‘.st_main img.st_preview’)) and add it to the resize function as well. I don’t have much time right now to check it properly but maybe I’ll work on Mary Lou’s script to implement this script with hers. I’ll let you know. Cheers

      Reply
    • malihu
      Posted on August 7, 2010 at 02:45 Permalink

      Philip check the comment area on codrops or get the Mary Lou’s script I edited from here:
      http://manos.malihu.gr/tuts/ThumbnailsNavigationGallery_EditedByMalihu.zip

      Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php