background-size: размер фонового изображения
background-size управляет размером фонового изображения независимо от размеров самого элемента.
Назначение
background-size управляет размером фонового изображения независимо от размеров самого элемента.
Как это работает
cover заполняет область с возможной обрезкой, contain помещает изображение целиком с возможным свободным пространством. Два размера можно указать явно; автоматический размер помогает сохранять пропорции.
Пример
<style>
.pattern{height:160px;background-image:linear-gradient(45deg,#d5e9de 25%,#fff 25%,#fff 75%,#d5e9de 75%);background-size:32px 32px;border:1px solid #789}
</style>
<div class="pattern" role="img" aria-label="Декоративный повторяющийся узор"></div>Что должно получиться
Размер одного фрагмента узора составляет 32 на 32 CSS-пикселя. Изменение background-size меняет рисунок внутри рамки, не размер самой рамки.
Граница применения и частая ошибка
Не ожидайте, что cover одновременно покажет весь кадр и заполнит любую область без полос. Если пропорции отличаются, нужно выбрать между обрезкой и свободным местом.
Самостоятельная проверка
В своём проекте сравните широкую картинку в квадрате с cover и contain. Для повторяемого узора изменяйте явный размер плитки и проверяйте плотность рисунка.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.