Свойство background-size
  1. Главная
  2. CSS
  3. Свойство background-size
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО BACKGROUND-SIZE

Свойство background-size определяет размер фоновых изображений.

Поддержка браузеров

9+

Синтаксис

background-size: auto|единицы измерения|проценты|cover|contain|initial|inherit

Значения свойства

Значение Описание
auto Значение по умолчанию. Фоновое изображение отображается в оригинальном размере.
единицы измерения Устанавливает ширину и высоту фонового изображения в единицах измерения. Подробнее о единицах измерения в CSS.
проценты Устанавливает ширину и высоту фонового изображения в процентах от размера родительского элемента.
cover Растягивает фоновое изображение с сохранением пропорций так, чтобы оно покрывало весь элемент.
contain Растягивает фоновое изображение с сохранением пропорций так, чтобы оно было полностью видно.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="block block-1"></div>
<div class="block block-2"></div>
HTML 
.block {
    background: url(/images/bg.png);
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    border: 1px solid black;
    display: inline-block;
}

.block-2 {
    background-size: cover;
}
CSS
← Перейти к списку свойств