Full screen centered background image with CSS and jQuery

Recently a lot of sites feature a full screen background image. Full screen background images can be used to give some sort of liquid effect to fixed layouts, or just to show full screen images in some special occurrences, such as Christmas or the launch of a new service.

This is what you’ll get: demo.

Before you continue reading this post, I have to warn you the title is misleading: you won’t center any background image. You are going to achieve this effect by using an image in div with a a low z-index.

During this example we’ll use a this photo by horlo.

HTML

As said, it’s an image inside a div, so let’s create them:

The div has an id called triquiback while the image has triquibackimg. It should be the first thing you add after body opening.

CSS

z-index and positions will be defined with CSS this way:

Notice the z-index of #triquiback and its overflow: being an <img /%gt; image and not a background, I had to set the overflow to hidden to prevent unwanted scrollbars. Also, the left and top positions are set to zero to override body margins and paddings.

Both the div and the image have fixed position to allow to easily place them with left and top.

jQuery

jQuery will allow us to resize the image as we want.

At line 6 I import jQuery library using Google as CDN.

The code is filled with alerts which will guide you through the demo, obviously you can remove them from your project.

Line 9: Function to be executed once the document is ready

Line 10: Function to be executed once the “background” image is loaded

Lines 11-12: Getting document area with and height

Lines 14-15: Getting “background” image width and height

Line 17: Determining image ratio as width/height

Line 19: Setting image width equal to document width

Line 20: Adjusting image height according to new image width and image ratio

Lines 22-23: Resizing the image

Line 24: Checking if the new image height is shorter than document height. In this case we need to resize the image again

Line 25: Setting image height equal to document height

Line 26: Adjusting image width according to new image height and image ratio

Lines 28-29: Resizing the image. At this time, we need to horizontally center the image

Line 30: Calculating half of the difference between new image width and document width

Line 32: Adding a style to image to move it by such difference to the right

And that’s it. You can check the demo here. In case of positive feedback, I’ll show you how to resize image on the fly when the browser is resized, and add an overlay to image.

  • Very nice. Where would we be without jQuery? I imagine you could link that up to the resize event too so if the browser size changes

  • Great tutorial! I was just thinking about doing this for a clients website. Is it possible to use this code together with a slider of some sort?

  • Fighterlegend

    It doesn’t fill up the whole web page for Google Chrome 9.0.576.0 dev.
    Not sure if it’s my extensions or not :S

  • Hey, thanks a lot, this is really clarifying. This is why those ads are linked even if they are background. All this time I thought they were using left and right div for each side of the page. I’ll try this on my website very soon.

  • I’ve done this to one of my sites and I call the same function when i resize the window.
    In this way you only calculate when entering the site. ;)

    Regards from Portugal
    IvoPereira

  • Pingback: IPHONE 4 SCREEN PROTECTOR 6-IN-1 PACK PART OF THE QUBITS ACCESSORIES RANGE « iibka.com()

  • Pingback: HTML Scripts Tips and Secrets » Blog Archive » Full screen centered background image with CSS and jQuery …()

  • Pingback: Full screen centered background image with CSS and jQuery … » Web Coding Unravelled()

  • przemeko

    It’ not working properly on ie6 :)

    • Emanuele Feronato

      OMG ie6…

  • prakash

    its working for me. but after is loaded when I am resized its won’t work

  • pozirk

    doesn’t work in opera.

    • Emanuele Feronato

      Change

      #triquibackimg{
      position:fixed
      }

      with

      #triquibackimg{
      position:relative
      }

  • This can be achieved with CSS alone; no need to invoke jQuery. Try this:-

    Scaled Backgound Example

    img.bg {
    /* Styles to fill background */
    min-height: 100%;
    min-width: 1024px;
    /* Style for proportionate scaling */
    width: 100%;
    height: auto;
    /* Style correct image positioning */
    position: fixed;
    top: 0;
    left: 0;
    }
    @media screen and (max-width: 1024px) {
    img.bg {
    left: 50%;
    margin-left: -512px;
    }

    I used this for my own site -with a semi-transparent scrollable div placed in the middle for content…..and here’s the kicker, use 50% transparent .png as repeated background images for your scrolling div, and the transparency is not inherited by child objects !Cool!

  • Nice Tutorial.

    I’ve written a similar tutorial on how to achieve the same effect without using any JavaScript.

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

  • FYI, the code has a command for zIndex in the css, it should be z-index

  • I used some code similar to this on my website. Works awesome! Thanks for sharing.

  • tim

    Hi, When using this script. Some browsers don’t display the resized image. On http://www.marcpollen.nl/open_max3.html is a link to a popup.

    When opening this link on a screen with a resolution of 1280*1024 and a default bg image with a high resolution 1920 width. The resizing won’t start automaticly in IE8.

    Can you help me out?
    regards tim

  • Great tutorial!
    Is it possible to use this code together with a slider of some sort?

  • Where is search bar? Where is javascript ect? I must use google to fint this subpage ;(
    New layout sux :)

  • This does not seem to work on iPad, or am I doing something wrong..??

  • Correction: does not work on iPad for site running on WordPress. Is there a need to have the img be in the same folder as the html file? No problems on iPhone, only iPad. Tried hard coding the tag into index.php theme template, did not solve the issue. Any ideas how I can solve this anybody?

  • all into one function


    $("#sfondo2 img").load(function(){
    var element = $(this);
    resize_bg(element);

    $(window).resize(function(){
    resize_bg(element);
    })

    function resize_bg(element){

    element.css("left","0");
    var doc_width = $(window).width();
    var doc_height = $(window).height();
    var image_width = element.width();
    var image_height = element.height();
    var image_ratio = image_width/image_height;
    var new_width = doc_width;
    var new_height = Math.round(new_width/image_ratio);
    if(new_height<doc_height){
    new_height = doc_height;
    new_width = Math.round(new_height*image_ratio);
    var width_offset = Math.round((new_width-doc_width)/2);
    element.css("left","-"+width_offset+"px");
    }
    element.width(new_width);
    element.height(new_height);
    }

    });

  • peter

    Can I use this as part of a template to sell on a template website? I.e for commercial use? Thanks

  • mojtaba constantine

    full screen without any space :)

    #triquiback{
    position:fixed;
    left: 0;
    top: 0;
    overflow:hidden;
    zIndex: -9999
    }
    #triquibackimg{
    position: fixed;
    top: 0;
    left: 0;
    }

  • Lovely script. It works just fine.

  • ignaz

    Some body know why some image can’t be visible when running in online ? but @ localhost is running very well :)
    can any help ?

  • Simon

    This is a great little script. I’ve tried many and this is the best with all browsers.

  • Simon

    @ignaz – Check your file path, e.g. image might be (“/images/background.jpg”) and the js might be “/js/jquery.backstretch.min.js”

  • i need to know how to get full screen instead ofjust bottom half can you please show me how

  • Kristjan

    background-size: cover?

  • Nice js. But used css3 simple.
    background: url(“bg.png”) no-repeat center center fixed;
    background-size: cover;

  • archana

    thank you very much guys…. very helpfull…..

  • Works perfect, please send me the trick for the auto-resize ;)

    congratulations, Emanuele :)

  • Nice script, but it doesnt work on iphone. Also i need to make an slider with the background… any idea?

  • Thanks,
    still usefull in 2015 (almost…).

    Happy new year !