CSS Background

Backgrounds are very important for a website. You can define the background of an element by using the background property.
CSS background properties are given below:

  • background-image - Specifies an image as a background of an element.
  • background-repeat - Used to control the repetition of a background image.
  • background-attachment - Used to control the scrolling of a background image.
  • background-position - Used to set the position of a background image.
  • background-color - Specifies the background color of an element.
  • background - It is a shorthand way to declare the other background properties.

The background-image Property

It is used to set an image as background of an element.

Example:

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

Run Example

The background-repeat Property

By default, the background images repeated both horizontally and vertically. You can control the repetition by using background-repeat property.
If you want to repeat an image horizontally you can use repeat-x value.

Example:

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

Run Example

If you want to repeat an image vertically you can use repeat-y value.

Example:

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

Run Example

If you don't want to repeat an image, want to use only once then you can use no-repeat value.

Example:

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

Run Example

The background-attachment Property

You can control the scrolling of a background image using background-attachment propeerty. If you want the background image fixed when when the page is scrolling then you can use fixed value.

Example:

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

Run Example

If you want to scroll the background image with the scrolling of the page then you can use scroll value.

Example:

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

Run Example

The background-position Property

You can set the position of the background image by using the background-position property. You can set the background using the following values: top, bottom, center, left or right.

Example:

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

Run Example

The background-color Property

You can define the background color using background-color property.

Example:

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

Run Example

The background Property

It is a shorthand property. You can define all the proerties in one line by using background property. It is not compulsory to use all the properties. It is not a problem if you skip one or more properties. The order of the properties is following:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Example:

body {
  background: lightblue url("images/html.jpg") no-repeat fixed center;
}

Run Example

Recommended Posts:

Related Tags: HTML Basics, CSS Basics, Bootstrap