Lesson 5.3: Backgrounds – Picturesque Backgrounds – Putting it Together

Between our last two lessons we’ve now taken a look at every background-related property. Now it’s time to bring it all together and create pages with working backgrounds.

Putting it all into the background property

The background property is our shortcut property that let’s use put all of the elements together. The proper order for using this property is: color image repeat attachment position. However, the background property isn’t too picky so if you switch up the order a bit, it won’t get too finicky. Also, you don’t have to specify those that you are okay using the default values for.

Here are a few examples:

background: #FFF url('background.jpg') repeat scroll center top;
background: #CCC url('background.jpg') repeat-x fixed top left;
background: #09F url('background.jpg');
background: url('background.jpg') no-repeat;

Can you tell what each one of those should do? Try to figure it out before you read on. The first one will create a horizontal bar made of the image repeating, started at the top left of the screen. The rest of the screen will be filled with a light gray. The second will fill the entire background with the specified image. Even though we have a background color set, we won’t see it once the page is fully loaded. We will see it before the image file loads though. The third we just place the image in the top-left corner without repeating it. The background color will be white because that is the default.

Practical Background Usage

Now that we have all the pieces, let’s talk briefly about how we could practically use these.

Usually you won’t have just one background on your page. On this page we actually have four backgrounds. We have a small vertical strip image which repeats in both directions at the header. We then have a small green gradient that repeats horizontally (repeat-x) in the navigation. We then have just a super light gray color (#EEE) for the main body with a slightly darker gray behind that one (#CCC). In most browsers, if you right-click over a background image you can view the image and see that it is actually just a small piece that repeats a lot.

While actually using backgrounds in tasteful ways is more of a design discussion (which we will discuss), we can discuss how to achieve certain effects here.

Horizontal Strip across the Top of the Page

If you want a horizontal strip across the top of the page, how do you think you would do it? If you thought that you would have an image positioned at the top with repeat-x, you would be correct. Depending if you start it at the left, center, or right will only shift the banner, but it will still fill completely.

If you want the strip to stay in place even when you scroll, you would set the attachment to fixed. If you want it to scroll (meaning it disappears when you stroll down a bit), you can leave it as the default scroll.

Here is an example of a Horizontal Strip Across the Top.

Vertical Strip across the Left of the Page

This is nearly the same as the horizontal bar, we would just use repeat-y and position it to the left. Like the issue with left, center, and right for the horizontal, whether you use top, center, or bottom will only shift the background but it will still fill the whole area.

And the list goes on

Really there are countless ways you can implement this. Want to center a single image, position it at center center. Want to have a horizontal strip that is down a bit, simply position it lower. Want a checkerboard? Create an image with two squares next to each other and repeat it in both directions.

There is really no limit to the number of ways you could set up a single background, let along when you begin considering all of your elements and their potential backgrounds as well.

In our design lesson about using backgrounds we’ll talk about how to put together different backgrounds to create nice layouts and what not to do. As for implementing them, it’s just a matter of thinking for a bit and playing around with the code until you get it just right. And of course if you are having trouble, leave a comment and ask us.

Sometimes One Isn’t Enough

One area that backgrounds lack is in the fact that you can only specify one background per element. You can easily overcome this by simply using more elements with different backgrounds. However, use this technique with caution because it is bad practice to use lots of elements purely for styling. Get creative and see if you can overcome this limitation in ways that don’t have lots of empty elements.