Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Background in CSS 2/2 | Π‘olors and Background
Introduction to CSS Part II

bookBackground 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:

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:

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:

body {
  background-image: url("my-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 4

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 5

bookBackground in CSS 2/2

Swipe to show menu

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:

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:

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:

body {
  background-image: url("my-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 4
some-alt