CSS Background

tutorial and example
tutorial and example

You can use CSS background property by using HTML element. There are five CSS background properties that are listed below:

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

1) CSS background-color

The CSS background-color properties is used to define the background color of the element.

Let us see an example of CSS background-color:

Try Now

2) CSS Background Image

You can use background-image properties by using to set an image as background of an element.

Let us see an example of CSS background image:

Try Now

3) CSS Background repeat

The background-repeat property is used to control the replication of an image in the background. By default, the background-image property repeats horizontally and vertically.

Example of Repeat image

Try Now

You want to create repeat-x image horizontally. If the image is repeated only horizontally the background will look better:

Example of Repeat image Horizontally

Try Now

Example of no Repeat image

Try Now

4) CSS Background-attachment

The background-attachment property is used to fixed the image in the background or scroll with the rest of the page in browser window.

Let us see an example of CSS background-attachment:

Try Now

5) CSS Background-Position

The background property is used as set the position of background-properties. By default the background image supported top-left of the webpage.

There are following position of CSS Background.

  • center
  • top
  • bottom
  • left
  • right

Let us see an example of CSS background-position:

Try Now

Shorthand Property

You can use background property to set all the background properties at once.

Let us see an example of Shorthand Property:

Try Now