CSS Background

CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:

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

Background Color

The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:

Example

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;} body {background-color:#b0c4de;}

In the example above, the h1, p, and div elements have different background colors:


Background Image

The background-image property specifies an image to use as the background of an element.

Example

body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically

Example

body
{
background-image:url('gradient2.png');
}

If the image is repeated only horizontally (repeat-x), the background will look better:

Example

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}