How to Use Full Screen Images as a Background with CSS

A full screen background image can transform the user experience of your website.
A full screen background image can transform the user experience of your website.

Using a full screen image as a background can be a powerful design element. While there are many different methods of implementing full screen background images, CSS code offers cross-browser compatibility without the use of Flash or JavaScript.

Here is a short example of the code from PaulMason required to implement full screen background images:

CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}

HTML
<body>
<img alt=”full screen background image” src=”/background.jpg” id=”full-screen-background-image” />
<div id=”wrapper”>
<p>Content goes here…</p>
</div>
</body>

Websites featuring full screen background images are gorgeous. Full screen background images are engaging and will draw users in. However, if you’re not careful, they can also detract from the rest of your design elements. Here are a few tips for web design with full screen background images:

Purposeful
Use full screen images purposefully. Don’t just use a full screen image to keep up with trends or because you like a particular image. Instead use a full screen image that embodies your brand message and enhances the user experience on the web page. When used with purpose, full screen background images can be very compelling.

Contrast
Create page elements that contrast with your full screen background image. Without contrast, your page navigation, text and other critical design elements will blend in or be difficult to see.

Custom
Don’t use stock photographs for full screen background images. If you must use stock photographs, have your web design professional customize them to match your brand. When you use a full screen image, all eyes will be on it. Create a custom background image that will enhance the user experience and your brand.

Typography
While it may seem unimportant, typography is important when you are using full screen background images. Use typography that matches the style of the images you are using for a cohesive overall web design.

What types of web pages do you think work best for full screen background images?