Background in CSS 2/2

The background-image property in CSS is used to specify a background image for an element. The background image is an image that appears behind the content of the element and can be specified using the URL function and a valid URL that points to the image file.

Here is an example of how the background-image property can be used in a CSS rule to set the background image of the body element:

css
9
1
2
3
body {
  background-image: url("image.jpg");
}

In this example, the url function is used to specify the URL of the image file, and the image file is specified in quotes.

You can also specify multiple images as a "fallback" system by providing a comma-separated list of images. The browser will use the first image that it can find:

css
9
1
2
3
body {
  background-image: url("my-image.jpg"), url("my-image-2.jpg");
}

In this example, if 'my-image.jpg' cannot be found, the browser will use 'my-image-2.jpg' as the background image instead.

You can also specify additional properties such as background-repeat, background-position, and background-size to control how the background image is displayed.

Here is an example that uses all of these properties:

css
9
1
2
3
4
5
6
body {
  background-image: url("my-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}