HTML Cookbook Basic HTML Course

It's Easy!


Alternate Version

CSS Background Review

In our CSS lessons, we have learned 5 properties to set background color and background images. This page is a brief summary of those properties.


Background Properties

The properties we have discussed are:


Sample Stylesheet

This sample stylesheet uses the color property and all of the background properties to set the basic appearance of a web page. This example would produce black text on a white page with a small image centered on a page that would stay in the middle of a pc monitor screen when the viewer scrolls the page.

/* basic page appearance */
body {
color: #000000;
background-color: #ffffff;
background-image: url(../images/mallrat.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

Background Property Shorthand (Advanced!)

There is a shorthand version for all of the background properties together. You may use the single background property if if you feel confident using all of the background properties. and you are sure you can remember the correct order for the values. Personally, I would prefer to declare the 5 properties individually to make sure I don't mess up.

The form for the shorthand background declaration is:
background: value1 value2 value3 value4 value5;

Notice that there are no semi-colons between the 5 values. The order for the 5 values is:

  1. value1 color
  2. value2 url
  3. value3 repeat
  4. value4 attachment
  5. value5 position
Sample Stylesheet with single background property
body {
background:
#00ff00
url(../images/mallrat.gif)
no-repeat
fixed
center;
}


Assignment

There is no assignment for this lesson. Call someone you love, read some poetry or write a letter.

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!