Effortless Full Screen Background Images With jQuery
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!
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
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.
Now that you’ve seen how it works, let’s build it!
Step 1: Grab Fullscreenr
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Design Shack + Fullscreenr</title> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- JavaScript codes --> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script> </head> <body> </body> </html>
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.
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.
<script type="text/javascript"> var FullscreenrOptions = { width: 907, height: 680, bgID: '#bgimg' }; jQuery.fn.fullscreenr(FullscreenrOptions); </script>
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.
<body> <!-- This is the background image --> <img id="bgimg" src="img/mountains-907x680.jpg" /> <!-- Here the "real" body starts, where you can put your website --> <div id="realBody"> <!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing --> </div> </body>
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.
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!
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.
<body> <img id="bgimg" src="img/mountains-907x680.jpg" /> <div id="realBody"> <div id="container"> <h1>Welcome to Hoth</h1> </div> </div> </body>
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.
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).
<body> <img id="bgimg" src="img/mountains-907x680.jpg" /> <div id="realBody"> <div id="container"> <h1>Welcome to Hoth</h1> <img src="img/walkers.jpg" /> </div> </div> </body>
And with that your image should fall right into place without any extra styling.
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.
<body> <img id="bgimg" src="img/mountains-907x680.jpg" /> <div id="realBody"> <div id="exampleDiv"> <h1>Welcome to Hoth</h1> <img src="img/walkers.jpg" /> <div id="grid"> <h2>Good Times on Hoth:</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </div> </div> </body>
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!
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.
<body> <img id="bgimg" src="img/mountains-907x680.jpg" /> <div id="realBody"> <div id="container"> <h1>Welcome to Hoth</h1> <img src="img/walkers.jpg" /> <div id="grid"> <h2>Good Times on Hoth:</h2> <p>Lorem ipsum dolor sit...</p> <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg" /></a> <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg" /></a> <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg" /></a> <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg" /></a> <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg" /></a> <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg" /></a> </div> </div> </div> </body>
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!
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!
Thanks for the easy to follow tutorial! I followed along and had a page working in 5 minutes.
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!
Very cool. I’ve tried your tutorial and it works very fine.
I think you forgot to add the text-align for align the gallery on center…
#grid {
margin-top: 20px;
text-align: center;
}
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!
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. :)
Nice. Thanks.
I would like to mention that I’m pretty sure I’ve seen this done with just CSS (no jQuery).
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.
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
It looks like you put some effort into this, Joshua. Thanks for the writeup. This will be useful.
CSS-only solution: http://www.ldexterldesign.co.uk/2010/09/random-background-images-with-css-background-size/
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.
This tutorial looks really cool. Cant wait to try it out!
If you test this in IE 7 you will see it has problems (namely two vertical scrollbars).
There’s also a problem (at least with chrome) when you use the mouse scroll…
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?
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/
Yeah, and Backstretch.js looks like is working fine in both Opera and IE7, where Fullscreener fails.
Thanks for sharing, simple and really helpful!
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
Really interesting plugin, I’ll try it. It also works on IE7, and that’s a great news for developer ^^
Great Tutorial!
Where can I remove the plugin for the dotted pattern image overlay?
Thank you
on an iphone, the content wont show past what initially loads… when you scroll down it’s cut off
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!
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?
Seems to work if you put html {overflow:hidden;} also in your css (additional to the overflow:hidden; already given in the body-tag
Very Nice Post . . Thanks For sharing it
Thank you for this great tutorial!
Probably the best and easiest tutorial I have ever encountered. Very very good !!
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
Sorry, create my *own* :S
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 ?
cool designs. looking so awesome and great inspiration.
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
Liking this. Will definitely try it later.
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