Watch our 3-minute video to find out how you can learn CSS with a live instructor.
Additional Resources

Colors and Backgrounds

In this lesson of the CSS tutorial, you will learn...
  1. To work with the color property.
  2. To work with the background-color property.
  3. To work with the background-image property.
  4. To work with the background-repeat property.
  5. To work with the background-attachment property.
  6. To work with the background-position property.

About Color Values

Colors values can be specified using several ways.

Color Names

There are 17 keyword color names that are specified in CSS2 (see footnote). Modern browsers support many additional color names - everything from papayawhip to darkorchid.

<div style="color: red">color: red</div>

Hexadecimal Color Values

Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the color, and bb is the amount of blue in the color.

<div style="color: #ff0000">color: #ff0000</div>

Short Hexadecimal Color Values

Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you can remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of red, g is the amount of green in the color, and b is the amount of blue. For example, #f60 is the same as #ff6600.

Syntax
selector {
 color: #f60;
}

Functional Notation

Functional notation takes the format rgb(n,n,n), where n is a number between 0 and 255 or percentage between 0% and 100%.

<div style="color: rgb(255,0,0)">color: rgb(255,0,0)</div>
<div style="color: rgb(100%,0%,0%)">color: rgb(100%,0%,0%)</div>

Recommendation

Our recommendation is to use three-digit hexadecimal notation (i.e, #rgb) when you can get the color you want and to use the six-digit hexadecimal notation (i.e, #rrggbb) when you need to define the color more granularly.

Color

As you have seen in the examples above, the color property is used to set the foreground color of an element.

Code Sample: BackgroundsAndColors/Demos/Color.html

<html>
<head>
<title>Color</title>
</head>
<body>

<h1>Color</h1>

<div style="color: red">color: red</div>
<div style="color: #ff0000">color:  #ff0000</div>
<div style="color: #f00">color: #f00</div>
<div style="color: rgb(255,0,0)">color: rgb(255,0,0)</div>
<div style="color: rgb(100%,0%,0%)">color: rgb(100%,0%,0%)</div>

</body>
</html>
Code Explanation

The above code will render the following:

Background-color

The background-color property is used to specify the background color of an element. It can be applied to block elements and inline elements.

Syntax
selector {
 background-color:color;
}

Code Sample: BackgroundsAndColors/Demos/BackgroundColor.html

<html>
<head>
<title>Background Color</title>
</head>
<body style="background-color: #0066ff;">
<h1>Background Color</h1>

<div style="height: 200px; width: 500px; background-color: #ff6600;">
 background-color: #ff6600
</div>

</body>
</html>

Background-image

Examples of properties associated with background images are shown in BackgroundsAndColors/Demos/BackgroundImage.html, which is listed at the end of this section.

The background-image property is used to specify the background image of an element. It can be applied to block elements and inline elements.

selector {
 background-image:url(url)
(see footnote);
}

Background-repeat

The background-repeat property is used with background-image to specify whether and how a background image should repeat. Possible values are listed below.

  • no-repeat - does not tile
  • repeat-x - tiles horizontally
  • repeat-y - tiles vertically
Syntax
selector {
 background-image:url(url);
 background-repeat:value;
}

Background-attachment

The background-attachment property is used with background-image to specify whether a background image should scroll as the content is scrolled or whether the content should scroll over it. Possible values are listed below.

  • scroll
  • fixed
Syntax
selector {
 background-image:url(url);
 background-attachment:value;
}

According to the specification, background-attachment specifies whether a background image is fixed relative to the viewport (e.g, the browser window) or scrolls along with the document. Internet Explorer 6 fixes the background image relative to the container, which is incorrect.

Background-position

The background-position property is used with background-image to specify the location of a background image. Possible values are listed below.

  • top
  • right
  • bottom
  • left
  • center
  • any combination of the above (e.g, top center or bottom left)
Syntax
selector {
 background-image:url(url);
 background-position:value;
}

The following page shows examples of different combinations of background properties.

Code Sample: BackgroundsAndColors/Demos/BackgroundImage.html

<html>
<head>
<title>Background Image</title>
</head>
<body>
<h1>Background Image</h1>

<div style="height:200px; width:500px;color:#ffffff; 
   background-image:url(Images/block.gif)">
 background-image:url(Images/block.gif)
</div>

<h2>Background Repeat</h2>
<div style="height:200px; width:500px;color:#ffffff;
   background-color:#ff6600; 
   background-image:url(Images/block.gif); background-repeat:no-repeat">
 background-color:#ff6600; background-image:url(Images/block.gif);
 background-repeat:no-repeat
</div>
<hr/>
<div style="height:200px; width:500px;color:#ffffff;
   background-color:#ff6600; 
   background-image:url(Images/block.gif); background-repeat:repeat-x">
 background-color:#ff6600; background-image:url(Images/block.gif);
 background-repeat:repeat-x
</div>
<hr/>
<div style="height:200px; width:500px;color:#ffffff;
   background-color:#ff6600; 
   background-image:url(Images/block.gif); background-repeat:repeat-y">
 background-color:#ff6600; background-image:url(Images/block.gif); background-repeat:repeat-y
</div>

<h2>Background Attachment</h2>
<h3>background-attachment:fixed</h3>
<div style="height:200px; width:500px;color:#ffffff;
   overflow:scroll; white-space:pre;
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:fixed">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:fixed<br />
 ---- Code Omitted ---- 

   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:fixed
</div>
<h3>background-attachment:scroll</h3>
<div style="height:200px; width:500px;color:#ffffff;
   overflow:scroll; white-space:pre 
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:scroll">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:scroll<br />
 ---- Code Omitted ---- 

   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-attachment:scroll
</div>

<h2>Background Position</h2>
<h3>background-position:right</h3>
<div style="height:200px; width:500px; color:#ffffff;
   background-color:#ff6600;
   background-image:url(Images/block.gif); background-repeat:repeat-y;
   background-position:right;">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:repeat-y; background-position:right
</div>
<h3>background-position:bottom</h3>
<div style="height:200px; width:500px; color:#ffffff;
   background-color:#ff6600;
   background-image:url(Images/block.gif); background-repeat:repeat-x;
   background-position:bottom;">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:repeat-x; background-position:bottom
</div>
<h3>background-position:center</h3>
<div style="height:200px; width:500px; color:#ffffff;
   background-color:#ff6600;
   background-image:url(Images/block.gif); background-repeat:no-repeat;
   background-position:center;">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-position:center
</div>
<h3>background-position:20% 20%</h3>
<div style="height:200px; width:500px; color:#ffffff;
   background-color:#ff6600;
   background-image:url(Images/block.gif); background-repeat:no-repeat;
   background-position:20% 20%;">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-position:20% 20%;
</div>
<h3>background-position:20px 20px</h3>
<div style="height:200px; width:500px; color:#ffffff;
   background-color:#ff6600;
   background-image:url(Images/block.gif); background-repeat:no-repeat;
   background-position:20px 20px;">
   background-color:#ff6600; background-image:url(Images/block.gif);
   background-repeat:no-repeat; background-position:20px 20px;
</div>

</body>
</html>

Exercise: Colors and Backgrounds

Duration: 15 to 25 minutes.

In this exercise, you will continue to work on Stories.html by applying styles to the links on the page.

  1. Open CssText/Exercises/Stories.html, which you were working on in the last lesson and save it in the BackgroundsAndColors/Exercises directory.
  2. Modify the color and background properties of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with backgrounds and colors in CSS.
  3. There are images in Exercises/Images that you may want to use. You're also welcome to use any other images you have access to.
  4. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.
Where is the solution?

Colors and Backgrounds Conclusion

In this lesson of the CSS tutorial, you have learned to use CSS background and color properties.

Footnotes

  1. The list can be found at http://www.w3.org/TR/CSS21/syndata.html#color-units.

  2. Some documentation URL in parentheses and quotes (e.g, url(url). The W3C site documentation is unclear on which, if either, is preferred, but both seem to work equally well in practice.

To continue to learn CSS go to the top of this page and click on the next lesson in this CSS Tutorial's Table of Contents.
Last updated on 2009-10-16

Use of http://www.learn-css-tutorial.com (Website) implies agreement to the following:

Copyright Information

All pages and graphics on Website are the property of Webucator, Inc. unless otherwise specified.

None of the content on Website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of pages or content on Website

This content may not be printed or saved. It is for online use only.

Linking to Website

You may link to any of the pages on Website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.

Warranties

Website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm