Применение background-size в css

Теория

background-size переводится как «фоновый размер».

Свойство background-size в CSS является одним из наиболее полезных — и наиболее сложных — свойств фона. Существует множество вариантов, которые можно использовать для этого свойства, они имеют разные варианты использования. Вот основной пример:

html {
  background: url(greatimage.jpg);
  background-size: 300px 100px; 
}

Это пример синтаксиса двух значений для размера фона. С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова, синтаксис с одним значением, синтаксис двух значений и нескольких фонов.

В дополнение к значению по умолчанию (Auto) имеются еще два значения, которые можно использовать с фоновым размером: cover и contain.

cover позволяет убедиться в том, что изображение всегда покрывает весь контейнер, даже если он должен растянуть изображение. contain, с другой стороны, всегда показывать изображение целиком, даже если оно оставляет немного места с разных сторон или снизу.

Default — указывает автоматическое вычисление размера на основе фактического размера изображения и пропорций.

Если задано только одно значение (например, background-size: 400px), оно вычисляется для ширины, а для высоты устанавливается значение Auto. Можно использовать любые другие единицы размера CSS, включая пиксели, проценты и т. д.

Если вы предоставляете два значения, первая задает ширину фонового изображения, а вторая — высоту. Как в синтаксисе одиночного значения, можно использовать любые единицы измерения, которые вы хотите.

Можно также комбинировать любой из вышеперечисленных методов и применять их к нескольким изображениям, просто добавляя запятые между синтаксисом. Например:

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}
Фото

cover-contain пример

Видео Обсуждение

Автор Cascading Style Sheets