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

Fullscreen background image inside frame with jQuery

Set an image as html background that takes the full browser dimensions inside a frame using css and the jquery library.

First we load the jquery library by inserting:

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

between the head tag of our document. This code loads the jquery library straight from Google and we do this for caching purposes.

The CSS

body{margin:0px; padding:0px; background:#fff;}
#bg{position:fixed; z-index:1; overflow:hidden; top:20px; left:20px;}
#bgimg{display:none;}
#preloader{position:relative; z-index:2; width:32px; top:50%; margin:-32px auto;}

The markup

<div id="bg">
    <div id="preloader"><img src="http://manos.malihu.gr/tuts/ajax-loader.gif" height="32" width="32"></div>
    <img src="http://manos.malihu.gr/tuts/thebgimg.jpg" id="bgimg" height="900" width="1200">
</div>

We have given an id of bgimg to our image which will be inside a div with an id of bg. We place the background div on z-index:1, so all other content should be on z-index:2 or higher. Also the position is fixed so the background doesnโ€™t scroll with the rest of the content and an overflow of hidden hides any unnecessary scrollbars. The top and left position are set to 20 pixels and act as borders. You can change it to any value you like, as long as you remember to also change the variable theBorder in the script.

Next we need to insert the actual script that does the work of streching proportionaly and centering our image and adds the preloader with some fade effects. Weโ€™ll insert this at the very end of the document, just before the closing body tag

<script>
$theBorder=20; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");
$bgimg=$("#bg #bgimg");
$preloader=$("#preloader");
$(window).load(function() {
    FullScreenBackground($bgimg,$bg);
 
    $(window).resize(function() {
        FullScreenBackground($bgimg,$bg);
    });
});
 
$bgimg.load(function() {
    var $this=$(this);
    FullScreenBackground($this,$bg);
    $preloader.fadeOut("fast");
    $this.delay(200).fadeIn("slow");
});
 
function FullScreenBackground(theItem,theContainer){
    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);
    };
    $(theContainer).css("width",winWidth-($theBorder*2));
    $(theContainer).css("height",winHeight-($theBorder*2));
    $(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>

31 Comments

Post a comment
  1. Filippo
    Posted on January 22, 2016 at 17:21 Permalink

    Hello and thank you for sharing this nice tutorial!

    Do you know if it is possible to reduce the border width depending by screen resolutions?

    I have tried with media queries but without any results.

    Could you be so kind to help me?

    Thanks!

    Filippo

    Reply
  2. Kapil
    Posted on October 6, 2015 at 15:07 Permalink

    hi there,

    nice work, just one little question that how to set it for “autoplay” ?

    Reply
  3. Daniel Aviles
    Posted on April 22, 2012 at 04:36 Permalink

    Hi Malihu,

    First of all thanks for sharing and great work!
    I wanted to have a 24px border on the left top and right side and 47px on the bottom..
    How can I do this with your code? I tried $theBorder=47 and bg{top:24px; left:24px;} but the right side has 47px any suggestions?

    Thanks a bunch!

    Reply
    • malihu
      Posted on April 22, 2012 at 16:03 Permalink

      Hi Daniel,

      The quickest way to do what you need is to change 1 line inside the script. Put $theBorder=24 normally and also #bg{top:24px; left:24px;}. Now the trick is to change the line (on demo, line 44):
      $(theContainer).css("height",winHeight-($theBorder*2));
      in the script, to:
      $(theContainer).css("height",winHeight-(($theBorder*3)-1));
      This, will give you exactly 47px bottom border.

      Additionally, since 2 times 24 is 48, you could have 48px bottom border by simply changing the $theBorder multiplier from 2 to 3:
      $(theContainer).css("height",winHeight-($theBorder*3));

      Hope this helps
      Thanks for your comments ๐Ÿ™‚

      Reply
      • Dan
        Posted on April 24, 2012 at 07:54 Permalink

        Thanks a lot malihu!!!

        Reply
  4. Jane
    Posted on October 18, 2011 at 06:25 Permalink

    Is there a way to make it fit the entire image without cropping any off? I want my full image to show, and I don’t mind bars on the top or sides. You have this option in your Sideways gallery, but I don’t know how to implement it here. Thanks.

    Reply
  5. Apaung Anhote
    Posted on July 26, 2011 at 12:13 Permalink

    Hi malihu,

    I had having problem like this guyz “Alessio” who posted above about refresh problem. That bugs only appear sometimes. Sometimes, when you keep refreshing, image doesn’t load and it’s only show preloader. Any chance to take a look at the issue ? I am trying to reproduce, but it’s only happen sometimes and that bugs happen in all latest browser. Thanks.

    Reply
  6. Morning-web
    Posted on June 3, 2011 at 21:14 Permalink

    thks malihu, it’s a nice work.
    These days to found a lot of solutions, but ultimately this is the best one. Excitement! Thank you for sharing it. Admire your selfless sharing.
    Thanks again

    Reply
    • malihu
      Posted on June 4, 2011 at 01:41 Permalink

      Thanks for your comments. I’m a sharing-whore, can’t help it ๐Ÿ˜‰

      Reply
  7. Zeit
    Posted on February 25, 2011 at 20:08 Permalink

    Hi
    Awesome !
    Thanks for sharing.
    I’d like to use this script as an intro to my website and close it down or move to my home page when getting to the last image.
    Any idea on how to do that ?
    Thanks for your help.
    Zeit

    Reply
    • malihu
      Posted on February 26, 2011 at 14:09 Permalink

      Hi,
      This script simply sets a single image as a fullscreen background. What you probably need, is some kind of fullscreen slideshow that redirects to a new page after x seconds or images. This would be a totally different script that requires much more than this script offers.

      Reply
  8. Nick
    Posted on February 21, 2011 at 19:50 Permalink

    Hi Malihu,

    This is a great tutorial, thanks so much.

    One quick question – is it possible to duplicate this multiple times on a page? Where the page would scroll, and there would be multiple divs with full, resizable background?

    I’ve tried simply duplicating the code and adding multiple divs but it doesn’t seem to work.

    Let me know, thanks so much!

    Reply
  9. Paul Mason
    Posted on January 24, 2011 at 11:30 Permalink

    Nice Tutorial.

    Iโ€™ve written a similar tutorial on how to achieve the same effect without using any JavaScript, just CSS

    Check it out:
    http://paulmason.name/blog/item/full-screen-background-image-pure-css-code

    Reply
  10. ะั€ั‚-ะบะฐั„ะต ะ‘ัƒั„ั„
    Posted on December 12, 2010 at 19:51 Permalink

    and in html:
    img src=”img/home-bg1.jpg” class=”bg” alt=”ะั€ั‚-ะšะฐั„ะต ะ‘ัƒั„ั„”

    Reply
  11. ะั€ั‚-ะบะฐั„ะต ะ‘ัƒั„ั„
    Posted on December 12, 2010 at 19:50 Permalink

    and in html:

    Reply
  12. ะั€ั‚-ะบะฐั„ะต ะ‘ัƒั„ั„
    Posted on December 12, 2010 at 19:49 Permalink

    Why use Jquery? Enough to register in the css:

    img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
    }

    and in html:

    Reply
    • malihu
      Posted on December 13, 2010 at 01:36 Permalink

      Yes you can do it with pure css, but the reason I prefer jquery is because of the full control over the appearance and behavior of the image in regards to proportionate scaling and position (e.g. center positioning).

      Reply
    • Justin Underwood
      Posted on August 4, 2012 at 00:31 Permalink

      Thank you so much for your intelligent solution.
      This is perfect.
      I recommend this over any javascript technique.
      Ideal for full background images in IE 7 and 8.

      Reply
  13. von Lichtenfels
    Posted on December 7, 2010 at 19:24 Permalink

    Hi,

    i like that scrip, nice work.
    I’m trning myself about jQuery right now, that’s why I’m looking for examples and playing around with the code.
    There is one thing in your example that I don’t get. Why is the image jumping several pixels top down after the preload?
    I’m trying to find the problem but I just don’t find it.

    Could you help me please?

    Reply
    • malihu
      Posted on December 8, 2010 at 10:37 Permalink

      Hello,
      Seems that fade-in needs some delay for the image to finish scaling and positioning. Just add a .delay(200) to image fade-in:

      Find $this.fadeIn(“slow”); and turn it to:
      $this.delay(200).fadeIn(“slow”);

      I’ve updated the demo and post. Thanks a lot for your feedback ๐Ÿ™‚

      Reply
      • von Lichtenfels
        Posted on December 9, 2010 at 13:27 Permalink

        works perfectly now ๐Ÿ™‚
        cool thing.
        Slowly I’m getting behind the jQuery functions. Your examples helped me a lot. Thanks.

        Reply
  14. Alessio
    Posted on October 15, 2010 at 18:05 Permalink

    Well done!

    But the preloader don’t work for me with firefox 3.6.10.

    When i open the page i see only the preloader gif but the image don’t load.
    Only after refresh the page the image start loading…

    Can you help me?

    Sorry for my english…;)

    Reply
    • malihu
      Posted on October 16, 2010 at 05:08 Permalink

      Hi Alessio,
      I don’t have any problems with Firefox 3.6.10.
      Anyway I’ve updated/optimize a bit the code so give it another try.

      Reply
  15. marc
    Posted on August 13, 2010 at 20:52 Permalink

    Really nice, works with an overlay div and scroller, the negative about this is, or what could be better is that it needs some preloader (ajax).

    Reply
    • malihu
      Posted on August 13, 2010 at 22:58 Permalink

      Indeed! I’ll definately implement a version with preloader ๐Ÿ˜‰ Thanks for the feedback

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

      Done ๐Ÿ˜‰

      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