This article is also available as a TechRepublic download.

Before CSS arrived, Web developers had limited control over
page and element backgrounds. Sure, they could use the background attribute to
tile an image over an entire page, and they could control the background color
of an image with the bgcolor attribute.
But their control ended there — they couldn’t, for example, adjust the
position of the page background image, control the tiling, or create a page
watermark.

CSS changed all that, by making it possible to precisely
control page and element backgrounds via its family of background-* directives.
In addition to offering greatly improved functionality, using CSS directives for
background control has a number of other advantages: it doesn’t require any
special software, it works on most major browsers, and it allows centralized control
over a site’s background images and colors.

Sounds interesting? Then keep reading, because this article examines
the CSS background property, which provides an alternative to the older background attribute and is a great tool for manipulating the location, color, position, and
tiling of your page and element backgrounds.

Controlling background color

First, let’s look at the background-color property, which defines the background color of the element
it’s applied to. This directive accepts either an RGB value in hexadecimal
notation or a “color word” such as red,
silver, or blue. Listing
A
shows an example.

Listing A

<html>
<head>
<style type=”text/css”>
.author {
background-color: #FFE303
}

.quote {
font-style: italic;
background-color: lime
}
</style>
</head>

<body>
<div class=”author”>William Shakespeare said:</div>
<p />
<div class=”quote”>To be or not to be, that is the question.</div>
</body>
</html>

And Figure A shows what it looks like.

Figure A

Example of Listing A

Controlling background image

If you’d like a background image instead of a flat color,
head for the background-image directive,
which allows you to specify the URL of the image you wish to use as background (Listing B).

Listing B

<html>
<head>
<style type=”text/css”>
body {
background-image: url(‘mylogo.gif’);
}
</style>
</head>

<body>
</body>
</html>

Figure B shows what it
looks like.

Figure B

Listing B example

You can also specify this for a particular element, as in
the Listing C example.

Listing C

<html>
<head>
<style type=”text/css”>
.header {
width: 100%;
height: 60%;
border: solid 1px red;
background-image: url(‘mylogo.gif’);
}
</style>
</head>

<body>
<div class=”header”></div>
</body>
</html>

And Figure C
shows the output.

Figure C

Listing C example

Controlling background image repetition

By default, the background-image directive
tiles the image both horizontally and vertically across the selected element.
Often, this is not what you want — if, as in the previous example, you’re using
your company logo as background and only want it to appear once or if your
background image is designed for vertical tiling only. For all these
situations, CSS offers the background-repeat directive,
which accepts one of four possible values: repeat-x (tile horizontally only), repeat-y (tile vertically only), no-repeat (no tiling), and repeat (tile both horizontally and
vertically).

To see this in action, consider the example in Listing D, which turns off tiling for
the first <div> and tiles the logo horizontally across the second
<div>.

Listing D

<html>
<head>
<style type=”text/css”>
.header1 {
width: 100%;
height: 35%;
border: solid 2px red;
background-image: url(‘mylogo.gif’);
background-repeat: no-repeat;
}

.header2 {
width: 100%;
height: 60%;
border: solid 2px black;
background-image: url(‘mylogo.gif’);
background-repeat: repeat-x;
}

</style>
</head>

<body>
<div class=”header1″></div>
<p />
<div class=”header2″></div>
</body>
</html>

Figure D shows us what it looks like.

Figure D

Listing D example

Controlling background image position

It’s also possible to control the position of the background
image relative to the element it’s placed in. The background-position directive
accepts position coordinates either as percentages or lengths, or via keywords
such as top, bottom, left, right, and center. To see how this works, consider the
example in Listing E, which places
the background image at the bottom-right of its containing element.

Listing E

<html>
<head>
<style type=”text/css”>
.header {
width: 100%;
height: 80%;
border: solid 2px red;
background-image: url(‘mylogo.gif’);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>

<body>
<div class=”header”></div>
</body>
</html>

Figure E shows us what it might look like.

Figure E

Listing E example

Needless to say, this directive is extremely useful when
positioning a single background image, such as a company logo, on a Web page.

Controlling background image scrolling

Finally, CSS also lets you define whether the background
image scrolls when the containing element is scrolled. This has applications
mostly in watermarking Web pages, and the directive to use is the background-attachment directive,
which accepts the self-explanatory values of either scroll or fixed. Listing
F
is an example of how this can be used to generate a watermark that always
appears at the top-right corner of the page.

Listing F

<html>
<head>
<style type=”text/css”>
body {
background-image: url(‘mylogo.gif’);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
</style>
</head>

<body>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
</body>
</html>

And now, when you attempt to scroll down this page, the
image at the top-right corner will remain fixed relative to the browser viewport and
will not scroll down with the rest of the page content. (Figure F)

Figure F

Listing F example

Of course, these examples are just the tip of the iceberg
when it comes to working with backgrounds in CSS. However, they should give you
some insight into how these properties work in practice, and you should now
know enough to begin experimenting on your own. So what are you waiting for? Get started…and happy coding!