CSS 2.1 Reference: background Property

The background property is used as a shorthand method to specify one or more of the following 5 background properties all in one place. All 5 of these properties are optional but at least one of them must be specified. Any of these properties that are not specified will automatically be set to their initial value.

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

CSS Example: The background property is set by specifying all 5 values.

  body {background: #ffa500 url("../images/floatingball.gif") no-repeat fixed right bottom;}

CSS Example: The background property is set by only specifying an image.

  body {background: url("../images/floatingball.gif");}

• color keywords:
  • aqua - aqua = #00ffff = rgb(0,255,255)
  • black - black = #000000 = rgb(0,0,0)
  • blue - blue = #0000ff = rgb(0,0,255)
  • fuchsia - fuchsia = #ff00ff = rgb(255,0,255)
  • gray - gray = #808080 = rgb(128,128,128)
  • green - green = #008000 = rgb(0,128,0)
  • lime - lime = #00ff00 = rgb(0,255,0)
  • maroon - maroon = #800000 = rgb(128,0,0)
  • navy - navy = #000080 = rgb(0,0,128)
  • olive - olive = #808000 = rgb(128,128,0)
  • orange - orange = #ffa500 = rgb(255,165,0)
  • purple - purple = #800080 = rgb(128,0,128)
  • red - red = #ff0000 = rgb(255,0,0)
  • silver - silver = #c0c0c0 = rgb(192,192,192)
  • teal - teal = #008080 = rgb(0,128,128)
  • white - white = #ffffff = rgb(255,255,255)
  • yellow - yellow = #ffff00 = rgb(255,255,0)
  • transparent - The background color under the element is visible.
• image keyword:
  • none - Do not display a background image.
• repeat keywords:
  • repeat (Repeat the background image horizontally and vertically.)
  • repeat-x (Repeat the background image horizontally.)
  • repeat-y (Repeat the background image vertically.)
  • no-repeat (Do not repeat the background image.)
• attachment keywords:
  • scroll - Background image will scroll along with the web page.
  • fixed - Background image is fixed and will not scroll.
• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.

• transparent for background-color
• none for background-image
• repeat for background-repeat
• scroll for background-attachment
• 0% 0% for background-position