Stylesheets Tutorial - Day 4

by Steve Mulder
We've talked mostly about text thus far, and I think you'll agree that it's about time we introduce color and images into the mix. The CSS properties discussed today enable us to apply colors to elements, and to place images behind elements. If you haven't already been convinced that CSS is a good thing, you will be by the end of today.

We'll be covering these stylesheets properties:

Oh, and here's the answer to the Bonus Question from Part 3.

Let's dive right into color.

Colorizing Your World


First, let's talk about applying color to elements on a Web page.

color

The color property won't sound alien, because it works much like you'd expect it to and uses the same kinds of values that we're used to in HTML.

With this CSS rule, as soon as you have bold text on your page, like this text, the browser will display it in the appropriate color. In reality, what you're doing is specifying the "foreground" color of the text.

There are three ways of defining which color you want:

That wraps up our quick tour of using color in the foreground. But you can also use color in the background.

Background Colors for Everything
In order to put a background color behind an element using HTML, you have to resort to creating a table cell around the element and then filling the cell with a solid colxor. With CSS, background colors are much easier.

background-color

Use this CSS property to add a solid color behind any element on the page, including images.

The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.

You don't have to color the background of an entire paragraph. You can put color behind just one word if you want.

The preceding two paragrahs were written using the background-color CSS property.

In IE 3 and Netscape Communicator, the background color behind that first paragraph doesn't extend the same amount for every line, but instead appears only behind the words themselves. In IE 4, the color extends a bit more, forming a large rectangle around the whole paragraph.

(Important note: IE 3 doesn't support the background-color property at all, but it does support background, which is a shorthand property that can achieve the same effect. See Page 6 for more info.)

You can also give the background-color property a value of transparent. This means that the background you'll see is whatever background would normally show through; that is, any inherited background color is ignored.

Background colors are great, but what about putting images in the background? Your wish is my command.

Background Images for Everything
Now things start to get really promising. With stylesheets, you can place an image behind any element on the page. This gets very cool very quickly, so hang on....

background-image

Apply background-image to an element, and you can put a GIF or JPEG behind it with ease:

The above rule been applied to this entire paragraph. You can see that the background GIF tiles just like a background image normally does, except it appears only beneath this text.

You can also apply a background image to just two words if you want. Want to have a background image fill the entire browser window? Apply it to the <BODY> tag.

You can call up an image with a URL, either a relative one like images/bg/bow6.gif or a full URL like http://www.shopwa.com.au/images/bg/bow6.gif.

A value of none will override any inherited value for background-image.

When you specify a background image, it's a good idea to also specify a background color using, obviously, the background-color property. This solid color will appear while the image loads, and it will also show through any transparent regions of the image. Here's an example:

CSS makes Becky gleeful.

As you can see, the purple solid color shows through where the GIF is transparent.

Assorted background-image bugs in our favorite browsers:

Pretty nifty stuff, eh? Well, you ain't seen nothin' yet.

Controlling Background Images
Not only can you place background images behind elements - you can also control exactly how those background images behave. You can decide how or if they should tile, whether they should scroll or remain fixed, and where they should be positioned. Yes, neighbors, it's true!

background-repeat

Background images always have to tile, right? Nope. With this CSS property, you can control if or how those images tile.

The above rule was applied to this entire paragraph. The same background GIF we've used before appears behind the text, but since we've used no-repeat, it doesn't tile, and instead displays just once.

If you want the background image to tile just vertically or just horizontally, you can do that too. A value of repeat-x makes the image tile horizontally (like you see behind this paragraph), and repeat-y makes the image tile vertically. By the way, a value of repeat makes the image tile in both directions, which is what we're used to seeing.

The preceding two paragraphs were written using the background-repeat property.

background-attachment

In HTML, we're used to background images scrolling with the page. But with CSS, you can also set up a background image that doesn't scroll, but remains fixed in the window regardless of where you scroll on the page. The key is background-attachment.

Here's an example of background-attachment: fixed in action, so you can see what it feels like when you scroll. (Note: This property doesn't work in Communicator, but IE users can enjoy it.)

This property works only when applied to page backgrounds - that is, background images specified to the <BODY> tag.
You have two choices for values:

background-position

Finally, you can also position where your background image should start displaying. Essentially, you control exactly where the image displays behind the element you're applying it to.

So, when the above CSS rule is applied to a paragraph such as this one, the background image is positioned at the center and bottom of the "box" that defines this paragraph. (The first word refers to horizontal position, and the second word refers to vertical position.) The image then tiles down and to the right normally.

If you're not seeing what's described above, then you're probably using Communicator, which doesn't support background positioning. :-(
There are three ways to specify position:

Before ending for this part, we need to look at the shorthand property for all background effects.

The Shorthand Property

As we promised, here's info on the shorthand property that enables you to apply all the background properties previously discussed in one tidy CSS rule.

This is what you have to use for IE 3 (as we've mentioned) so you might as well use it for all browsers.

background

With the background property, you can define background color, image, tiling method, scrolling versus fixed status, and position. Example:

This paragraph has the above rule applied to it. As you can see, the background color is light green, and the background image is tiled only vertically, with the first tile positioned at the top right corner of the "box" surrounding this paragraph. (Remember that Communicator doesn't support background positioning.)
When you use background, you don't necessarily have to set every aspect of the background. You could set just the image and color if you wanted to, or any other combination.

As you might have guessed, any browser bugs that we already ran into for the individual background properties also apply to the shorthand background property.
Ah, the freedom and power of stylesheets. Let's get our hands dirty with color and backgrounds.

Part 4 Exercise

To test yourself with these new CSS properties, check out this page and try to rebuild it yourself without looking at the code. It uses stylesheets properties from today and previous days of the tutorial. The page uses two graphics, which you can download here and here. Don't forget, you must have a 4.0 browser for the examples to work correctly.

Bonus Question: How could you use CSS to guarantee that a company's logo always appears at the bottom right of the browser window, no matter where on a page a user scrolls, and no matter what size the browser window is? The answer tomorrow.
Let's quickly review today's topics.

Review of Day 4

tylesheets-enabled Web pages get much more interesting with this kind of control over colors and backgrounds, don't you think? The power we now have over background images is particularly exciting, and opens up all sorts of design opportunities.

Here's a quick recap of today's properties:

In Part 5 we'll be examining the power CSS gives us to position elements anywhere on the page that we want them, and even to layer those elements on top of each other. See you then!



Steve Mulder is a Senior Consultant at TSDesign, and author of Web Designer's Guide to Style Sheets. He wishes he could wallpaper his dining room using <BODY BACKGROUND>. Unfortunately, it would probably dither.