мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство background-size

Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.

Синтаксис

селектор { background-size: значение; }

Ключевые слова

Значение Описание
auto Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции.
cover Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком.
contain Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте).

Значение по умолчанию: auto.

Использование

Единицы для размеров и auto могут быть использованы в различных комбинациях, например, так: auto 20px, или 30% 20px, или auto 30% и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр - размер фона по высоте. Если указан один параметр - то он будет задавать размер фона и по ширине, и по высоте одновременно.

Пример

Сейчас фоновая картинка будет иметь свой натуральный размер:

<div id="elem"></div> #elem { background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 550px; height: 400px; }

:

Пример

Сейчас фоновая картинка будет размер 300px на 400px (в нашем случае пропорции картинки исказятся):

<div id="elem"></div> #elem { background-size: 300px 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }

:

Пример

Сейчас фоновая картинка будет размер 400px на 400px (в нашем случае пропорции картинки исказятся):

<div id="elem"></div> #elem { background-size: 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }

:

Пример

Сейчас фоновая картинка будет размер 400px по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:

<div id="elem"></div> #elem { background-size: 400px auto; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }

:

Пример

Сейчас фоновая картинка будет размер 400px по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:

<div id="elem"></div> #elem { background-size: auto 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }

:

Пример . Значение contain

Посмотрите на работу значения contain:

<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div> .elem { background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }

:

Пример . Значение cover

Посмотрите на работу значения cover:

<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div> .elem { background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }

:

Пример . Улучшим работу cover

Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):

<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div> .elem { background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }

:

Смотрите также

  • свойство background,
    представляющее собой свойство-сокращение для фона