File Under: CSS

Mulders Stylesheets Tutorial – Lesson 4

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

  1. Colorizing Your World
  2. Background Colors for Everything
  3. Suggested readings
    1. Background Images for Everything
    2. Controlling Background Images
    3. The Shorthand Property
    4. Lesson 4 Exercise
    5. Review of Lesson 4

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.

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 bg.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 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:
    • top aligns the background image with the top of the foreground element’s “box.”
    • bottom aligns it with the bottom of the “box.”
    • left positions the image along the left side.
    • right positions it along the right side.
    • 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.