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:
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;
}
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Ask me questions about this topic
Summarize this chapter
Show real-world examples
Awesome!
Completion rate improved to 5
Background 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;
}
Thanks for your feedback!