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.

ColorValuesAbout Color Values

Colors values can be specified using several ways.

Color Names

There are 17 keyword color names that are specified in CSS2 . 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

Short hexadecimal color values take the format #rgb, where r is the amount of red in the color, g is the amount of green in the color, and b is the amount of blue in the color. Short hexadecimal color values can be converted to regular hexadecimal color values by repeating each character. For example, #f60 is the same as #ff6600.

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

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 stick to the regular hexadecimal notation (i.e, #rrggbb) as it has the best support and provides the most flexibility.

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");
}

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>

Colors and Backgrounds Conclusion

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

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.

Use of this website implies agreement to the following:

Copyright Information

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

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

No Printing or saving of web pages

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

Linking to this website

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

Warranties

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