CSS Background

CSS Background

Background Color

The background-color property specifies the background color of an element.
The background color of a page is set like this:

Example

body {
    background-color: #b0c4de;
} 

 

With CSS, a color is most often specified by:

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

Look at CSS Color Values for a complete list of possible color values.
In the example below, the

, , and

elements have different background colors:

Example

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

 

With CSS, a color is most often specified by:

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

Look at CSS Color Values for a complete list of possible color values.
In the example below, the

, , and

elements have different background colors:

Example

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

 

Below is an example of a bad combination of text and background image. The text is almost not readable:

Example

body {
    background-image: url("bgdesert.jpg");
}

 

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
    background-image: url("gradient_bg.png");
} 

 

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

Example

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}