Controlling Web Page Backgrounds With CSS
By Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams and David Johnson
Case Study: Deadwood Design
That was a very quick tour, but you now have all you need to create stunning and functional backgrounds. So, let’s get into the fun stuff!
Let’s imagine that it’s 8.30 on a Monday morning, and you’ve just walked into your office to find the mockup shown below in your inbox, with love from your inhouse designer. What we have here is a fictitious company called Deadwood Design, whose web site we have to build.
You’re still a little groggy from your big weekend, and at first glance it all seems fairly straightforward. But let’s look more closely at all the elements that make up this design. Gradients? Check. Patterns? Check. Images? Check. But, just a second...
The designer has requested that the design be made fluid, or liquid, meaning that it should be able to adapt in height and width to the user’s browser, while retaining the desired proportions. Every feature situated to the left of the tree in Figure 3.1 must therefore remain in its existing position, no matter what. The tree and the logo, however, must have the ability to move further to the right as users increase the size of their browsers. That said, the tree must remain anchored to the bottom of the layout at all times.
"Dude… what?" you think to yourself.
Never fear, Grasshopper, we’re here to help. To succeed in our chosen field of endeavor, we must first start at the bottom—which is exactly what we’re going to do now. We need to get rid of those pesky elements on the page, and take a look at how we need to construct the background image for the body element. This job poses quite the challenge, but we’re up for it! The first decision we need to make is where to begin our work. The answer, of course, is with the background.
Take a look at the next illustration. As you can see, it’s an average run-of-the-mill gradient that we can create right now in Photoshop, Fireworks, GIMP, or any graphics application of your choice. If you look closely, you’ll find that the gradation actually ends about three-quarters of the way down the page, and the lighter gray makes up the rest of the page.
Let’s crop this image to a height of 550px, to produce the background shown below.
This image doesn’t change at any point along its X axis: the only color changes occur on the Y axis. What this means is that, rather than trying to use this large image as our background, we can cut a slice of it, from top to bottom, and repeat that tall, skinny image across the page. As I’m sure you’ve guessed, this supports our goal of being able to increase the width of the page automatically, in response to the resizing of user’s browser.
Now we can start our CSS file! Here’s the body declaration we’ll need:
As you can see, we’ve set the background-color of the body to gray (#A4A4A4), and repeated the gradient image along the X axis only.
Now we’ll create the tree image shown at right, and anchor that to the lower-right corner of the browser viewport. The best way to create this image is either to save it as a transparent PNG, or create a GIF by placing the tree on top of a gray background (#A4A4A4) and knocking out that gray when you export the file.
At this point, the body of our HTML document is empty, so let’s begin to flesh it out by adding a div with an id of tree—this empty element will be used as the styling hook we need to add the transparent tree image: