CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

• 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 set like this:

body {
    background-color: lightblue;}

In the example below, the <h1>, <p>, and <div> elements have different background colors:

h1 {
    background-color: green;}

div {
    background-color: lightblue;}

p {
    background-color: yellow;}

Background Image

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

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

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

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:

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

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