Full screen centered background image with CSS and jQuery

November 13, 2010 • Css, Html, Javascript by Emanuele Feronato • 35 Comments

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>

</div>

</body>

</html>

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <style type="text/css">
          #triquiback{
               position:fixed;
               left: 0;
               top: 0;
               overflow:hidden;
               zIndex: -9999
          }
          #triquibackimg{
               position:fixed
          }
     </style>
</head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#triquiback{

position:fixed;

left: 0;

top: 0;

overflow:hidden;

zIndex: -9999

}

#triquibackimg{

position:fixed

}

</style>

</head>

<body>

</div>

</body>

</html>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
     <title>AUTO RESIZE BACKGROUND IMAGE</title>
     <script type="text/javascript">
     $(document).ready(function() {
          $("#triquibackimg").load(function(){
               var doc_width = $(document).width();
               var doc_height = $(document).height();
               alert("Step 1: getting document size\n\nWidth: "+doc_width+"px\nHeight = "+doc_height+"px");
               var image_width = $(this).width();
               var image_height = $(this).height();
               alert("Step 2: getting image size\n\nWidth: "+image_width+"px\nHeight = "+image_height+"px");
               var image_ratio = image_width/image_height;
               alert("Step 3: getting image width/height ratio: "+image_ratio);       
               var new_width = doc_width;
               var new_height = Math.round(new_width/image_ratio);
               alert("Step 4: adapting the image to document width, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
               $(this).width(new_width);
               $(this).height(new_height);
               if(new_height<doc_height){
                    new_height = doc_height;
                    new_width = Math.round(new_height*image_ratio);
                    alert("Step 5: the image isn't high enough\n\nAdapting the image to document height, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
                    $(this).width(new_width);
                    $(this).height(new_height);
                    var width_offset = Math.round((new_width-doc_width)/2);
                    alert("Step 6: moving the image left by "+width_offset+"px to have it centered");
                    $(this).css("left","-"+width_offset+"px");
               }
               alert("Yeah!! Done :)");
          })
     });
     </script>
     <style type="text/css">
          #triquiback{
               left: 0;
               top: 0;
               position:fixed;
               overflow:hidden;
               zIndex: -9999
          }
          #triquibackimg{
               position:fixed
          }
     </style>
</head>
<body>
     <div id = "triquiback">
          <img id = "triquibackimg" src = "bg.jpg" />
     </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>AUTO RESIZE BACKGROUND IMAGE</title>

$(document).ready(function() {

$("#triquibackimg").load(function(){

var doc_width = $(document).width();

var doc_height = $(document).height();

alert("Step 1: getting document size\n\nWidth: "+doc_width+"px\nHeight = "+doc_height+"px");

var image_width = $(this).width();

var image_height = $(this).height();

alert("Step 2: getting image size\n\nWidth: "+image_width+"px\nHeight = "+image_height+"px");

var image_ratio = image_width/image_height;

alert("Step 3: getting image width/height ratio: "+image_ratio);

var new_width = doc_width;

var new_height = Math.round(new_width/image_ratio);

alert("Step 4: adapting the image to document width, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");

$(this).width(new_width);

$(this).height(new_height);

if(new_height<doc_height){

new_height = doc_height;

new_width = Math.round(new_height*image_ratio);

alert("Step 5: the image isn't high enough\n\nAdapting the image to document height, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");

$(this).width(new_width);

$(this).height(new_height);

var width_offset = Math.round((new_width-doc_width)/2);

alert("Step 6: moving the image left by "+width_offset+"px to have it centered");

$(this).css("left","-"+width_offset+"px");

}

alert("Yeah!! Done :)");

})

});

</script>

#triquiback{

left: 0;

top: 0;

position:fixed;

overflow:hidden;

zIndex: -9999

}

#triquibackimg{

position:fixed

}

</style>

</head>

<body>

</div>

</body>

</html>

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.

Rate this post: 1 Star

(19 votes, average: 4.11 out of 5)

Loading ...

Template Monster offers you a great assortment of CSS Templates.
They can be a great start to launch a website of your own and meet the individual needs of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 35 comments

Michael Kelly

on November 13, 2010 at 4:28 pm

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
Adrian

on November 13, 2010 at 4:54 pm

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

on November 13, 2010 at 6:12 pm

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
LSaridina

on November 13, 2010 at 6:54 pm

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.
Ivo Pereira

on November 13, 2010 at 7:32 pm

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
IPHONE 4 SCREEN PROTECTOR 6-IN-1 PACK PART OF THE QUBITS ACCESSORIES RANGE « iibka.com

on November 14, 2010 at 12:04 am

[...] Full screen centered background image with CSS and jQuery … [...]
HTML Scripts Tips and Secrets » Blog Archive » Full screen centered background image with CSS and jQuery …

on November 14, 2010 at 5:11 am

[...] here to see the original: Full screen centered background image with CSS and jQuery … Related Posts:Minimal Business Portfolio FULL xHTML CSS Template with 3D jQuery … Related [...]
Full screen centered background image with CSS and jQuery … » Web Coding Unravelled

on November 14, 2010 at 5:37 am

[...] Full screen centered background image with CSS and jQuery … Related Posts:SuperSized – Full screen background/slideshow Jquery plugin Using Supersized, [...]
przemeko

on November 14, 2010 at 5:00 pm

It’ not working properly on ie6 :)
Emanuele Feronato

on November 14, 2010 at 10:05 pm

OMG ie6…
prakash

on November 15, 2010 at 7:30 am

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

on November 15, 2010 at 11:01 pm

doesn’t work in opera.
Emanuele Feronato

on November 16, 2010 at 10:59 am

Change

#triquibackimg{
position:fixed
}

with

#triquibackimg{
position:relative
}
Adam

on January 12, 2011 at 10:28 pm

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!
Paul Mason

on January 24, 2011 at 11:20 am

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
Brian

on February 25, 2011 at 8:01 pm

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

on March 20, 2011 at 3:10 pm

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

on March 22, 2011 at 4:22 pm

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
free bird

on March 25, 2011 at 7:48 am

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

on April 25, 2011 at 11:39 am

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

on July 25, 2011 at 10:11 pm

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

on July 26, 2011 at 4:45 pm

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?
Damy2000

on October 21, 2011 at 6:47 pm

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

on November 11, 2011 at 8:51 pm

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

on January 13, 2012 at 11:16 am

full screen without any space :)

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

on February 22, 2012 at 1:52 pm

Lovely script. It works just fine.
ignaz

on March 23, 2012 at 11:06 am

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

on May 25, 2012 at 8:17 am

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

on May 25, 2012 at 8:21 am

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

on June 3, 2012 at 7:52 pm

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

on July 18, 2012 at 3:12 pm

background-size: cover?
CNTC

on October 1, 2012 at 8:00 am

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

on November 23, 2012 at 10:03 am

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

on December 1, 2012 at 3:03 pm

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

congratulations, Emanuele :)
Lucho

on May 3, 2013 at 1:12 am

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

italian geek and PROgrammer

This post has 35 comments

Fighterlegend

przemeko

Emanuele Feronato

prakash

pozirk

Emanuele Feronato

peter

mojtaba constantine

ignaz

Simon

Simon

Kristjan

archana