Precisely control page and element backgrounds with CSS

by Contributor Melonfire | Apr 19, 2007 3:11:00 PM

Tags: Contributor Melonfire, element background, CSS, background image, directive, Listing B, background color

Takeaway: Cascading style sheets (CSS) make it possible to precisely control page and element backgrounds via its family of background-* directives. Examine the benefits of the CSS background property as a tool for manipulating the location, color, position, and tiling of your page and element backgrounds.

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!

12 comment(s)