Applying Background Images to Elements
background-image property allows us to add an image as the background of an HTML element. The basic syntax is so simple:
background-image: url("image-url.jpg");
As a value for the background-image property, we use url(), and inside these brackets, we specify the image url.
index.html
index.css
background-repeat
It determines if the image will be repeated horizontally, vertically, both or not at all.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position is used to set the starting position of a background image within an element's background area. This property allows us to specify where the background image should be placed and how it should be positioned relative to the element. We have to set the position on the x and y axis
background-position: x y
index.html
index.css
background-size
Controls how the background image is scaled:
background-size: auto | cover | contain | value in px/em/rem;
auto: original image size;cover: fills the entire element, may crop;contain: fits the whole image, may leave empty space;value: custom size (e.g.,100px50px,50%).
index.html
index.css
1. What does the background-image property do?
2. What does the background-repeat property do?
3. What property determines the position of an element's background image?
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Awesome!
Completion rate improved to 2.56Applying Background Images to Elements
Swipe to show menu
background-image property allows us to add an image as the background of an HTML element. The basic syntax is so simple:
background-image: url("image-url.jpg");
As a value for the background-image property, we use url(), and inside these brackets, we specify the image url.
index.html
index.css
background-repeat
It determines if the image will be repeated horizontally, vertically, both or not at all.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position is used to set the starting position of a background image within an element's background area. This property allows us to specify where the background image should be placed and how it should be positioned relative to the element. We have to set the position on the x and y axis
background-position: x y
index.html
index.css
background-size
Controls how the background image is scaled:
background-size: auto | cover | contain | value in px/em/rem;
auto: original image size;cover: fills the entire element, may crop;contain: fits the whole image, may leave empty space;value: custom size (e.g.,100px50px,50%).
index.html
index.css
1. What does the background-image property do?
2. What does the background-repeat property do?
3. What property determines the position of an element's background image?
Thanks for your feedback!
