Как работает свойство background-size в CSS для создания идеальных фонов?

Свойство background-size в CSS позволяет изменять размер фонового изображения. doka.guide Если фоновая картинка не совпадает по размеру с размерами блока, то с помощью этого свойства можно сделать так, чтобы картинка занимала всю площадь блока или, наоборот, была определённого размера. doka.guide

Некоторые способы работы свойства background-size:

• Абсолютное изменение размера. htmlbook.ru Можно задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и другие. htmlbook.ru Если необходимо, изменятся пропорции. htmlbook.ru Например, если фоновая картинка имеет размеры 200×200 пикселей, то код background-size: 100px 200px оставит высоту, но сделает ширину в два раза меньше. htmlbook.ru
• Относительное изменение размера через проценты. htmlbook.ru Если применяются проценты, размеры основываются на элементе, а не изображении. htmlbook.ru Например, если у контейнера ширина 500px, то размер изображения уменьшится до 250×250. htmlbook.ru
• Масштабирование до максимального размера. htmlbook.ru Свойство background-size понимает ключевое слово contain. htmlbook.ru Изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера. htmlbook.ru
• Заполнение фоном. htmlbook.ru Свойство background-size понимает ключевое слово cover. htmlbook.ru Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана. htmlbook.ru

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения. htmlbook.ru

При создании страниц и добавлении фоновых изображений важно следить, чтобы исходное изображение имело достаточное разрешение. ru.hexlet.io При попытке растянуть небольшое изображение можно увидеть пикселизованную картинку, что не добавит привлекательности странице. ru.hexlet.io