Effortless Full Screen Background Images With jQuery

by on 5th November 2010 with 59 Comments

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

Demo

Just so you can get a feel for what we’re building, check out the demo below. To see the jQuery in action, resize the browser window and watch how the image adapts dynamically.

View the demo

screenshot

Now that you’ve seen how it works, let’s build it!

Step 1: Grab Fullscreenr

screenshot

The first thing you’re going to want to do is go to the Fullsreenr website and download a copy. Grab the JS files and throw them into a folder with a basic website framework: html, css and images folder.

Step 2: Start the HTML

To begin the HTML, thrown in the code for an empty page and add the references for the stylesheet and the two JavaScript files.




	
	
	
	
	
	





Step 2: Select a Background Image

Before we insert the code for placing our background image, we’ll need to know the size. Which of course means we need to find an image.

I grabbed the image below by Faisal.Saeed on Flickr Creative Commons. It’s an awesome snowy mountain scene that should make the perfect setting for our site.

screenshot

Next, I sized the image so that it would be 907px by 680px. These are the dimensions that we’ll use in our next step.

Step 3: Insert the Fullscreenr Snippet

In the demo files of the Fullscreenr download, you should find the following JavaScript snippet to enable the plugin. I’ve customized it a bit with the image dimensions specified above.


All you have to do for your own version is change the hight and width to match that of your own image.

Step 4: Body HTML

Next up, there is a chunk of HTML in the demo page that you’ll need to grab. The structure may seem a little funky but really all the developer has done is applied the background image to the body and created a basic container (realBody) for you to then add all the rest of your content to. If you don’t like the div ID names used by the developer, feel free to change them to something more conventional.


	
	

	
	

As you can see, all we’ve done here is throw in the background image.

Step 5: Add the CSS

Finally, throw in the CSS below to make everything work properly. This is necessary to make sure your content will scroll correctly and stay positioned properly in the stack.

body {
	overflow:hidden; 
	padding:0;margin:0;
	height:100%;width:100%;
}

#bgimg {
	position:absolute;
	z-index: -1;
}

#realBody{
	position:absolute;
	z-index: 5;	
	overflow:auto; 
	height:100%;width:100%;
	background: url('../img/raster.png');
}

And with that, you’re done! You should now have a background image that dynamically scales with the browser window. The transition is super smooth and works brilliantly.

screenshot

The plugin comes with an dotted pattern image overlay, shown below in a zoomed-in view. If you don’t like this effect, simply leave it out!

screenshot

If you’d like, you can stop here and proceed with your own design. If you’re interested on where to go from here, I’ll finish up with some fun design.

Step 6: Add a Background Div and Header

Now that we’ve got our background image, we want to center a div over the top of it and give it a background fill. We’ll also give it a basic header that I thought seemed appropriate given the snowy background image.


	

	

Welcome to Hoth

Next we’ll style these two elements with CSS (insert this in addition to the CSS above).

#container {
	width: 800px;
	height: 1000px;
	margin: auto;
	margin-top: 60px;
	padding-top: 10px;
	background:rgba(0,0,0,.8);
	
}

#container h1 {
	color:#fff;
	font-family: 'KitchenpoliceRegular', sans-serif;
	font-size:60px;
	font-weight: normal;
	text-decoration:none;
	text-align:center;
}

@font-face {
	font-family: 'KitchenpoliceRegular';
	src: url('KITCHENPOLICE-webfont.eot');
	src: local('‚ò∫'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
	font-weight: normal;
	font-style: normal;
}

This is a big chunk of code but it’s all super basic. First, we gave the container a height and width, then set the margins to auto. This gives us a vertical strip that automatically stays centered on the page. The background color for the container has been applied using rgba. This will give us a nice transparent container that lets some of that nice background image show through.

Next, we used applied some basic styles to the header and customized the font using @font-face. I used a font called Kitchen Police and an @font-face kit from FontSquirrel.

At this point, your page should look like the image below.

screenshot

Step 7: Add a Header Image

The next step is extremely easy. All you have to do is toss in an image that’s the same width as the container (800px).


	

	

Welcome to Hoth

And with that your image should fall right into place without any extra styling.

screenshot

Step 8: Add Some Text

In this step we’re going to add some basic filler text to the page and in the next we’ll add a grid of images. Since the text will hypothetically tie into the images, we’ll throw it all into a “grid” div.


	

	

Welcome to Hoth

Good Times on Hoth:

Lorem ipsum dolor sit amet...

To style the text, we’ll first add a little margin to the top of the div. Then we apply basic color, size, and positioning to both the h2 tag and the paragraph tag. Notice I used some more @font-face goodness, this time with Lobster.

#grid {
	margin-top: 20px;
}

#grid h2{
	color: #fff;
	text-align: left;
	margin-left: 65px;
	font-size: 30px;
	font-family: 'Lobster', sans-serif;
	margin-bottom: 3px;
	font-weight: normal;
}


#grid p{
	color: #fff;
	text-align: left;
	margin-left: 65px;
	margin-bottom: 3px;
	font-size: 12px;
	font-family: helvetica, sans-serif;
	margin-top: 0px;
	width: 650px;
	line-height: 18px;
}

@font-face {
	font-family: 'Lobster';
	src: url('Lobster_1.3-webfont.eot');
	src: local('‚ò∫'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
	font-weight: normal;
	font-style: normal;
}

This should give you a nicely style block of text similar to that in the image below. Now we can move onto the final step!

screenshot

Step 9: Add the Gallery

To finish the page up, we’ll toss in a simple image gallery that is basically just a grid of nine JPGs. To give the photographers credit, I’ve linked each to the original source images on Flickr.


	

	

Welcome to Hoth

Good Times on Hoth:

Lorem ipsum dolor sit...

As the final piece of the puzzle, we’ll toss in some margins and borders to make the image grid look nice and styled.

#grid img {
	margin: 20px 10px 20px 10px;
	border: 3px solid #000;
}

#grid a:hover img{
	border: 3px solid #fff;
}

That should space everything and and finish up your page! Feel free to keep going and add in a navigation section, footer, sidebar and whatever else you can think of!

screenshot

Conclusion

jQuery and the Fullscreenr plugin present the easiest and best-looking solution I’ve found for scaleable background images. If you’d rather try the same effect with CSS, check out Chris Coyier’s methods on CSS-Tricks. Chris presents three possible alternatives, the last of which uses pure CSS and works much better than other CSS attempts I’ve seen.

As always, thanks for reading. If you liked the article give us a tweet, digg or any other social shout out you can come up with!

Comments & Discussion

59 Comments

  • Darin

    Thanks for the easy to follow tutorial! I followed along and had a page working in 5 minutes.

  • http://www.journeytodesign.com Seth W

    Great job Joshua. This is a fun way to add full-screen backgrounds. Your tutorial is easy to follow too.

    p.s. As a Star Wars fan, nice usage!

  • Simon

    Very cool. I’ve tried your tutorial and it works very fine.

  • Simon

    I think you forgot to add the text-align for align the gallery on center…

    #grid {
    margin-top: 20px;
    text-align: center;
    }

  • http://aflorescu.daportfolio.com/ Adrian Florescu

    On IE 6 it`s crashed, on IE7+IE8 maybe it can be fixed.
    Maybe we can find solutions for IE to.

    This is really cool!
    Thanks!

  • http://blog.balootisme.com Baloot

    Thank you very much. I’d try this tutorial. Works fine and very nice one mate! This style can be use for portfolio type website. :)

  • http://www.ChiefAlchemist.com Chief Alchemist

    Nice. Thanks.

    I would like to mention that I’m pretty sure I’ve seen this done with just CSS (no jQuery).

  • http://www.andrazbegus.com ab

    the way I learned to do it is just with CSS and is similar to what is explained on CSS tricks website but not quite the same:

    all you do is first you of course place an image inside the body tag of your html page. I do it first thing. you then add a class to img tag and apply the following css to that class:

    first you make sure the image will be stretched all the way down to the bottom even if the browser window is actually higher than the image itself:

    min-height: 100%

    then you set up proportionate scaling for the image:

    width: 100%
    height: auto

    and finally you position it:

    position: fixed
    top: 0
    left: 0

    and make sure it stays under other elements that will appear on the page a.k.a. the content of the page:

    z-index: -1

    if you don’t use the z-index property then every element on the page would need a position property like position: relative in order to appear over the image. also in that case by right clicking on the image will show it as an image and it wouldn’t allow you to for example view the html source.

  • Pingback: CSS Brigit | Effortless Full Screen Background Images With jQuery()

  • http://gamepart.ru Aurochs

    Thank you, thats nice but not usable in some situations. Maybe i did smth wrong but i had blank space below the wall at3:4 screens

  • http://trendmedia.com Brian McNitt

    It looks like you put some effort into this, Joshua. Thanks for the writeup. This will be useful.

  • http://www.ldexterldesign.co.uk/ ldexterldesign
  • http://www.16i.co.uk 16i Web Design

    Needs an IF statement for IE6. Seen a few sites using this technique recently. For most people they’ll look stunning, but for a few, they’ll be completely inaccessible.

  • http://avisualidentity.com dave

    This tutorial looks really cool. Cant wait to try it out!

  • http://www.antbayliss.co.uk Ant

    If you test this in IE 7 you will see it has problems (namely two vertical scrollbars).

  • Pingback: Full - Blog van Trumm()

  • http://www.cesarcouto.com Cesar Couto

    There’s also a problem (at least with chrome) when you use the mouse scroll…

  • Pingback: zebky.com » Blog Archive » Full Screen Background Images With jQuery()

  • http://www.dev4press.com/ Milan Petrovic

    Great tutorial, thanks. But, there is a problem in Opera, after you scroll to bottom of the page, after all main content is moved, there is a huge are with no scrollbar and only parts of image are visible.

    Any one has a solution for that?

  • http://rodoneill.com Rod

    I wouldn’t say this is effortless, I recommend Backstretch.js, far more effortless and simpler solution – no need to know the image size which is a plus for my current project.

    http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

  • http://www.dev4press.com/ Milan Petrovic

    Yeah, and Backstretch.js looks like is working fine in both Opera and IE7, where Fullscreener fails.

  • Pingback: Fullscreen background met jQuery « Huub Krauth()

  • OrT

    Thanks for sharing, simple and really helpful!

  • Pingback: Fullscreen background met jQuery()

  • Pingback: Easily Create a Full Screen Photography Slideshow Website Without Flash | Design Shack()

  • http://paulmason.name Paul Mason

    Nice Tutorial!

    I’ve written a similar simple tutorial on how to achieve the same effect by using CSS only.

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

  • Pingback: » 65 jQuery Tutorials To Help You Customize Your Site()

  • Pingback: Tweets that mention Effortless Full Screen Background Images With jQuery | Design Shack -- Topsy.com()

  • http://www.gleenk.com/ Gleenk

    Really interesting plugin, I’ll try it. It also works on IE7, and that’s a great news for developer ^^

  • Pingback: bagel cafe » ぐりぐり動かせるデザインも素敵な、jQueryチュートリアル65選()

  • Richard

    Great Tutorial!

    Where can I remove the plugin for the dotted pattern image overlay?

    Thank you

  • carina

    on an iphone, the content wont show past what initially loads… when you scroll down it’s cut off

  • webie

    this is really great! But i have a problem on ie7. There is a vertical scroll on the “realBody” content and the height is a bit cut off. Any fix for this? Thanks!

  • Pingback: earthpixelstudios.com · Top 15 Helpful Jquery Tutorials()

  • Flo

    I’m using this in a project and testet it in IE7, even this tutorial, in both cases there are two vertical scrollbars. is there any way to avoid this?

  • Flo

    Seems to work if you put html {overflow:hidden;} also in your css (additional to the overflow:hidden; already given in the body-tag

  • http://www.endeavoursoft.net Endeavour

    Very Nice Post . . Thanks For sharing it

  • Pingback: WordPress Thesis: Add a Full Screen Background Image | Cyberhawk Designs || Unique Wordpress Website Designs()

  • Diederik

    Thank you for this great tutorial!

  • http://meyghani.net Amin

    Probably the best and easiest tutorial I have ever encountered. Very very good !!

  • Pingback: Fondos a pantalla completa | 2puntos2barras()

  • Pingback: Fondos a pantalla completa | Alfilodelaweb()

  • Pingback: 5 Amazing Fullscreen Background Images (Slideshow) jQuery Plugins | Code Insects()

  • http://www.m360ltd.co.uk Tom

    I too am having problems with this on the iPhone (iPhone 2g and iPhone 4) – both the demo and when I tried to create my phone. When you rotate the iPhone horizontally, it cuts off the bottom of the content. Any ideas?

    Tom

    • http://josdeberdt.be/ Joz

      In the css, put the position on fixed instead of absolute. This should solve the problem on iphone.

  • http://www.m360ltd.co.uk Tom

    Sorry, create my *own* :S

  • http://www.shinymanstudio.co.za Eric

    There seems to be an issue, if the spacebar is pressed.

    overflow:hidden for html does not fix this.

    Surely pressing the spacebar should result in the same action, “paging”.

    What CSS could you use as a fallback if a user presses the spacebar and it breaks the layout ?

  • Pingback: jquery Backstretch | prosoxi.com()

  • http://www.junyuetrade.com NikeJordans

    cool designs. looking so awesome and great inspiration.

  • Gwen

    Would love to use it except Fullscreenr isn’t providing an working download. Too bad you couldn’t provide a Zip file of all of your files, including Fullscreenr! Hint hint! :D

  • http://www.toddmotto.com Todd M.

    Liking this. Will definitely try it later.

  • http://www.theverylittleagency.com nico

    Hi there, great tutorial. I´m dying to make it in a site i´m developing, the downside is that the plugin is no more downloadable. Any other source?

    thanks

  • Pingback: 20 Background Effects using jQuery with 19 Excellent Examples | RockingCode()

  • http://zmartmedia.com javier

    Hi all, another version of the plugin, it’s the same but improved (not by me): https://gist.github.com/669132

  • http://www.thechagroup.com thechagroup

    Nice bit of code.

    Thank you for this!

  • Waffles

    hi im new to all of this but im in school for web design currently and your approach to this is different and i would like to learn it…

    where it says:step 2

    </script

    when i do it in my own file is it ok to name them differently: for example: javascript1.js and javascript2.js

  • Eric

    I’m having a problem with placing my header and footer.
    How can I place them at the very top and very bottom? I’ve been struggling for a while, but just cannot place them in correctly. I could use “position:absolute; top:-20px” for my header (though this way the scroll bar is affected…), but I still can’t have my footer on the bottom.

    I’m very new to any HTML and CSS, and I may be asking very silly questions. I apologize in advance if so.
    Either way, very friendly site with easy explanation. I love it. Thanks!

  • http://www.weibo.com/pengziyang Alex

    nice pics and cool stuff!
    hah

  • http://www.abhilashraj.com Abhilash Raj R.S

    is it free to use in commercial projects

Subscribe

Membership
About the Author