T&S Web Design

One example of a full-screen site

Hey, everyone! Time for a technical tip for those tweaking their website on their own. If that’s not you, feel free to skip this blog.

One cool way to use photography on your site is to have a photo set as the background image on your home page, and have it take up the whole background space, resizing to be bigger as you make your browser bigger (or smaller). Don’t trust me? Check out 75 cool websites using full screen photo backgrounds for yourself.

How is this accomplished? Well, traditionally there was some JavaScript hacking necessary. Fortunately, with CSS3, the solution is now much simpler. Here is some sample code:

body {
background-attachment: fixed;
background-image: url(my-background-image.jpg);
background-origin: content-box;
background-position: center center;
background-repeat: no-repeat;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

Of course, this doesn’t work right in versions of Internet Explorer before 9, so if you want to support that as well, you’ll have to use some jQuery trickery.