Background Image

background-image property allows us to add an image as the background of an HTML element. The basic syntax is so simple:

As a value for the background-image property, we use url(), and inside these brackets, we specify the image url.

background-repeat

It determines if the image will be repeated horizontally, vertically, both or not at all.

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-size

background-size specifies the size of an element's background image. It can be used to scale the image to fit the element, or to set a specific size for the background image.

• auto keeps the background image at its original size (default);
• cover scales the image to completely cover the element while maintaining its aspect ratio, possibly cropping parts of the image;
• contain scales the image to fit entirely within the element while maintaining its aspect ratio, possibly leaving empty spaces;
• value sets custom dimensions for the background image, such as 100px 50px or percentages like 50%.