CSS Cascading Style Sheet: Background Colours And Images

Background Colours and Images

Table of Contents:

• 1)Introduction
• 2) Colorizing Your World
• 3) Background colours for everything
• 4) Background Images for everything
• 5) Controlling Background Images
• 6) The Shorthand Properties

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

We\'ll be covering these stylesheets properties:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Now, let\'s dive right into color.

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 }

There are three ways of defining which color you want:

• Color names

  These 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 numbers

  For even more control, use hex, which comes in the format #336699. 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 #336699, for example, can be declared as #369. The browser will translate that into the six-digit format.

• RGB values

  Finally, 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.

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.

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.

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(/Schogini/web/images/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 tag.

You can call up an image with a URL, either a relative one like images/bg.gif or a full URL like http://www.schogini.com/pic/flower.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 everybody happy.

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

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(//Schogini/web/images/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.

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(web/images/background.gif) }

This property works only when applied to page backgrounds — that is, background images specified to the tag.

You have two choices for values:

• Withscroll, the background image will scroll normally along with the page\'s contents, the way we\'re used to seeing it.

• Withfixed, the background image will not scroll, but remains fixed in place regardless of any scrolling the user does.

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 values

  Keywords 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 values

  Length 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 values

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

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(/Schogini/web/images/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.)

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.