Welcome to Lesson 4 of our stylesheets tutorial.

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 in this lesson 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 this lesson.

We'll be covering these stylesheets properties:

 color
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background

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

Now, let's dive

right into color.
Contents
[hide]

 1 Colorizing Your World

 2 Background Colors for Everything
 3 Introduction
 4 What you'll need
 5 Steps
 6 Alternate methods
 7 Suggested readings
 o 7.1 Background Images for Everything
o 7.2 Controlling Background Images
o 7.3 The Shorthand Property
o 7.4 Lesson 4 Exercise
o 7.5 Review of Lesson 4
 8 Introduction
 9 What you'll need
 10 Steps
 11 Alternate methods

 12 Suggested readings

Colorizing Your World

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 as HTML.

B { color: #333399 }

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:

 Color namesThese are the same color names we're used to. The basic
16 are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.But Netscape's and
Microsoft's browsers also recognize hundreds of other color names. A
great place to see them all is HYPE's Color Specifier.
 Hexadecimal numbersFor even more control, use hex, which comes in
the format nowiki>#336699</nowiki¢. We don't have time to go into all
the details of the hexadecimal format here; if you want the scoop, start
at Webreference.com.By the way, CSS also supports a shorthand
notation for certain hex values. A value of nowiki>#336699</nowiki¢,
for example, can be declared as nowiki>#369</nowiki¢. The browser
will translate that into the six-digit format.
  RGB valuesFinally, there's a brand-new way of specifying color for
those who are used to the RGB notation, which is traditionally used in
graphics applications such as Photoshop. A color property with an RGB
value would look like this: B { color: rgb(51,204,0) } If you're not
familiar with RGB, the range is from 0 to 255, with one number each for
R (red), G (green), and B (blue).IE 3 doesn't support the RGB format, but
4.x and 5.x browsers do.

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 color. 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.

P.yellow { background-color: #FFFF66 }

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 and 5, the color extends a bit more,
forming a large rectangle around the whole paragraph. (Just like we saw with
borders.)
(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.

Introduction

What you'll need

Steps

Alternate methods

Suggested readings

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:

B { background-image:
url(http://www.wired.com/wired/webmonkey/stuff/Mulder/stuff3a/background
.gif) }

The above rule has 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.gif

or a full URL like .

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 Webmonkeys gleeful.

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

Assorted background-image bugs in our favorite browsers:

 As with all of the background-related properties, IE 3 supports the

shorthand background property, but none of the others discussed today.
See page 6.
 When you use linked stylesheets, IE 3 doesn't display background
images at all. Weird.
 Communicator (both platforms) and IE 4 (on Macs) sometimes don't
react well when you specify a background image to just part of a
paragraph. The browser might not display the image at all, or it might
add line breaks around the text that has the image behind it.
 If you specify both a background image and a background color,
sometimes Communicator treats the color as more important and
displays it on top of the image.

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.

P { background-repeat: no-repeat; background-image:

url(http://www.wired.com/wired/webmonkey/stuff/Mulder/stuff3a/background
.gif) }

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, instead it 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.

BODY { background-attachment: fixed; background-image:

url(http://www.wired.com/wired/webmonkey/stuff/Mulder/stuff3a/background
.gif) }

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:

 With scroll, the background image will scroll normally along with the
page's contents, the way we're used to seeing it.
 With fixed, the background image will not scroll, but remains fixed in
place regardless of any scrolling the user does.

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.

P { background-position: center bottom; background-image:

url(background.gif) }

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:

 Keyword valuesKeywords are nice and easy to use as values:

o top aligns the background image with the top of
the foreground element's "box."
o bottom aligns it with the bottom of the "box."
o left positions the image along the left side.
o right positions it along the right side.
o center centers the image horizontally (if used
before another keyword) or vertically (if used
after).
  Length valuesLength values give you even more control over where a
background image is placed. You can declare horizontal and vertical
starting points very precisely, like so:

P { background-position: 70px 10px; background-repeat: repeat-y;

background-image: url(background.gif) }

This paragraph shows the above rule in action. IE displays it properly:

The background GIF is placed 70 pixels across and 10 pixels down from
the upper-left corner of the "box" that makes up this paragraph. And
since I've set background-repeat: repeat-y, the GIF tiles only vertically
behind the text. Funky.

You can use any of the length units we've previously discussed, such as
pixels, points, inches, ems, and so on.(IE 3 doesn't support length values for
this effect.)

 Percentage valuesYou can also use percentages to set background

images in place. Here's an example:

P { background-position: 75% 50%; background-image:

url(background.gif) }

As expected, when this stylesheets rule is applied to this paragraph, the

background image begins horizontally at a point 75 percent of the way toward
the right edge of the paragraph's box, and vertically 50 percent down. Another
interesting note: If you resize the browser window and cause the paragraph
size to change, the background placement will change accordingly. (It won't
work on this particular page, because the column width of the text is
absolute, so it won't change when you resize the window. But try it out on
your own page.)

I've seen this use of percentages behave sporadically buggy in IE.

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

The Shorthand Property

As 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:

P { background:
url(http://www.wired.com/wired/webmonkey/stuff/Mulder/stuff3a/background
.gif) #CCFFCC repeat-y top right }

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.)

If your browser doesn't support this CSS property, click here to see what it
looks like.

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 this shorthand property.

Ah, the freedom and power of stylesheets. Now, let's get our hands dirty.

Lesson 4 Exercise

To test yourself on these new CSS properties, check out this page and try to
rebuild it yourself without looking at the code. It uses stylesheets properties
from this lesson and previous lessons of the tutorial. The page uses two
graphics, which you can download here and here. Don't forget, you must have
at least 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 the topics for Lesson 4.

Review of Lesson 4

Stylesheets-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 this lesson's properties:

 color sets the foreground color of elements.

 background-color sets the solid color that appears behind elements.
 background-image is the way to insert GIFs and JPEGs behind text and
other elements.
 background-repeat lets you control if and how the background image
tiles.
 background-attachment determines whether a background image scrolls
with the page or is fixed.
 background-position enables you to precisely position a background
image relative to the element it's applied to.
 background is the shorthand property for specifying all the background-
related properties in one rule.

Our next lesson, Number 5, represents the final installment of our stylesheets
tutorial, and it's a beauty. In it, we examine the power CSS gives us to
position elements anywhere on a page and even to layer those elements on
top of one another.

Introduction