CSS Background Property

The background property specifies an element’s colour or image.

Property Name	Description
background-image	Specifies an element’s background image
background-color	Specifies an element’s background colour
background-position	Specifies the position for the background (applies to images only)
background-repeat	Specifies if the background should be repeated (applies to images only)

background-image

The background-image property specifies an image background.

Syntax

background-image:url (‘url to image.extension’);

Example

body {

     background-image: url('flower.jpg');
}

In this example the body element has been given a background image. By default, the background image will be repeated; we can prevent this by using background-repeat.

background-repeat

The background-repeat will specify if the image should be repeated (titled). It can take these values:

• repeat-x
• repeat-y
• repeat (both x and y)
• no-repeat

Example

body {
    background-image: url('flower.jpg');
    background-repeat: no-repeat;
}

background-position

For images, the background-position specifies the position of the background.

Syntax

background-position: x y

The x controls the horizontal positioning: A positive value will force the element to the right while a negative value will force it to the left. The y controls the vertical positioning: A positive value will force it to go up while a negative value will force it down.

Example

body {
  background-position: 50% -50%;
  background-image: url('../Downloads/flower.jpg');
  background-repeat: no-repeat;
}

Here the image has been given a position of 50% for x and y, meaning it will be a cantered image (50% horizontal and 50% downwards).

background-color

Lastly the background-colour property specifies an element’s background colour.

Example

div {
  background-color:#3399FF;
}

This style would give all div elements a light blue background colour.