CSS Background

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

body {
    background-color: #338844;
     }

Set following background properties of an element:

• background-image property is used to set the background image of an element.
• background-color property is used to set the background color of an element.
• background-repeat property is used to control the repetition of an image in the background.
• background-position property is used to control the position of an image in the background.
• background-attachment property is used to control the scrolling of an image in the background.
• background property is used as shorthand to specify a number of other background properties.

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.

Syntax

background-image: url|none|inherit;

To set the background image for an element:

body {
    background-image: url("fl/img/bg.png");
     }

Background Color

The background-color property specifies the background color of an element.

Syntax

background-color: color|transparent|inherit;

Example

body {
    background-color: #338844;
     }

View CSS Color Values for a complete list.

The h1, p, and div elements have different background colors:

h1 {
    background-color: #ff0000;
   }

p {
    background-color: #00ff00;
  }

div {
    background-color: #0000ff;
    }

Background-repeat

The background-repeat property specifies whether the image is repeated.

Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;

Values

• repeat : The image is repeated both horizontally and vertically.

   body {
     background-image: url("images/fastlearning.jpg");
     background-repeat:repeat;
     }
  

• repeat-x : The image is repeated horizontally only.

   body {
     background-image: url("images/fastlearning.jpg");
     background-repeat:repeat-x;
     }
  

• repeat-y : The image is repeated vertically only.

   body {
     background-image: url("images/fastlearning.jpg");
     background-repeat:repeat-y;
     }
  

• no-repeat : he image is not repeated: only one copy of the image is drawn.

   body {
     background-image: url("images/fastlearning.jpg");
     background-repeat:no-repeat;
     }
  

• inherit : Takes the same specified value as the property for the element's parent.

   body {
     background-image: url("images/fastlearning.jpg");
     background-repeat:inherit;
     }
  

Background Position

Background position property is used to control the position of an image in the background.

Syntax

background-postion: value;

Example

 body {
   background-image: url("images/fl/bg.jpg");
   background-position:right;
   }

Background-attachment

The background-attachment property specifies whether a background image is fixed with regard to the viewport or scrolls along with the containing block.

Syntax

background-attachment: scroll|fixed|local|inherit;

Values

• Scroll : If specified, the background image scrolls with the element.

   body {
     background-image: url("img/fl/css/bg.jpg");
     background-attachment: scroll;
     }
  

• fixed : If specified, the background image does not scrolls with the element.

   body {
     background-image: url("img/fl/css/bg.jpg");
     background-attachment: fixed;
     }
  

• inherit : Takes the same specified value as the property for the element's parent.

   body {
     background-image: url("img/fl/css/bg.jpg");
     background-attachment: inherit;
     }
  

Background Shorthand property

There are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

When using the shorthand property the order of the property values is:

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

body {
    background: #f1f1f1 url("fl_img/css/bg.jpg") repeat-y left top;
     }

Share this article on