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.

‘Colour’ is British spelling and ‘color’ is American. In CSS you must use the American spelling. Also, remember that if you are going to style a web page using images or colour, it is best to use CSS because it is for presentation. Don’t use the <img> tag, as that is mainly for images which are part of content.