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

css

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.

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

css

• auto - значення за замовчуванням, яке встановлює фонове зображення у початковий розмір.

• cover - масштабує фонове зображення так, щоб воно повністю покривало елемент зі збереженням його співвідношення сторін. Це може призвести до обрізання деяких частин зображення, якщо співвідношення сторін елемента та зображення відрізняється.

• contain - масштабує фонове зображення так, щоб воно повністю покривало елемент зі збереженням його співвідношення сторін. Це може призвести до того, що навколо зображення будуть помітні порожні місця, якщо співвідношення сторін елемента та зображення відрізняється.

• value - задає ширину та висоту фонового зображення.

У цьому прикладі ми використаємо більшу картинку, ніж нам потрібно, оскільки хочемо розглянути різницю у поведінці кожного значення для властивості background-size.

• auto - default value, which sets the background image to its original size;

• cover - scales the background image to completely cover the element while maintaining its aspect ratio. This may cause some parts of the image to be cropped if the aspect ratio of the element and the image are different;

• contain - scales the background image to fit the entire element while maintaining its aspect ratio. This may cause empty spaces to be visible around the image if the aspect ratio of the element and the image are different;

• value - sets the width and height of the background image.

For this example, we will use the bigger picture than we need as we wish to consider the behavior difference of each value for the background-size property.