Рамки и фоны

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

Размер фона, шаг 1[2/33]

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

Для этого существует свойствоbackground-size. Оно принимает в качестве значения два аргумента: первый — это ширина фонового изображения, второй — его высота. Второй аргумент необязательный. Если высота не указывается, то она определяется автоматически в зависимости от ширины и исходных пропорций. По умолчанию оба аргумента равныauto.

Пример:

background-size: auto auto;   /* исходные ширина и высота изображения */
background-size: 100px;       /* ширина 100px, высота пропорциональная */
background-size: 100px 200px; /* ширина 100px, высота 200px */

Давайте проверим, как работает это свойство на практике.

Размер фона, шаг 2[3/33]

Ещё два значения свойстваbackground-size— этоcontainиcover.

Значениеcontainработает так:

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

Значениеcoverработает иначе:

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

Опробуем эти значения на практике.

Границы фона[4/33]

Ещё одно фоновое свойство —background-origin. Оно задаёт расположение и размеры области отображения фонового изображения и принимает три значения:padding-box,border-boxиcontent-box.

Значение по умолчанию —padding-box. При этом значении область отображения фонового изображения соответствует внутренней области блока, не включая рамки.

Приcontent-boxобласть отображения соответствует только области содержимого, не включая рамки и внутренние отступы.

Приborder-boxобласть отображения соответствует полному размеру блока, включая и рамки. Фоновое изображение начинается от внешнего края блока и закрывается рамками, если они заданы.

Обрезка фона[5/33]

Свойствоbackground-clipуправляет тем, как обрезается фон. Причём обрезаются не только фоновые изображения, но и фоновый цвет.

Значения свойства такие же, как уbackground-origin:padding-box,border-boxиcontent-box.

Значениеborder-boxзадано по умолчанию, при этом фоновое изображение совсем не обрезается.

Значениеpadding-boxобрежет фон по внутреннему краю области рамки.

Значениеcontent-boxобрежет фон по краю области содержимого.

Множественный фон[6/33]

Можно задать блоку несколько фоновых изображений одновременно. Для этого пути к изображениям в свойствеbackground-imageилиbackgroundперечисляются через запятую:

background-image: url("image-1.png"), url("image-2.png");

При этом выше будет то изображение, которое находится раньше в списке:image-1.pngв примере будет вышеimage-2.png.

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

/* для первой картинки масштабирование contain, для второй — 100px */
background-size: contain, 100px;

/* для первой картинки позиционирование top, для второй — 100% */
background-position: top, 100%;

Давайте Кексу на портрете добавим модные очки с помощью второго фонового изображения.

Позиция фона от разных сторон[7/33]

Интересная возможностьbackground-position, о которой мы раньше не рассказывали — расположение фона можно задавать относительно любого угла блока, а не только от левого верхнего.

Чтобы указать от какой стороны отсчитывать расположение фона, нужно перед значением координат задать ключевые слова:top,right,bottomилиleft. Например:

/* по умолчанию координаты задаются для левого верхнего угла */
background-position: 10px 50px; /* слева 10px, сверху 50px */

background-position: right 30px bottom 60px; /* справа 30px, снизу 60px */
background-position: left 50px bottom 10px; /* слева 50px, снизу 10px */
background-position: right 40px top 30px; /* справа 40px, сверху 30px */

Поддержка данных значений свойстваbackground-positionв современных браузерахпрактически полная.

Давайте добавим мсьё Кексу модные монокль и усы, а расположим эту картинку от нижнего правого угла.

Повторение фона: background-repeat: round[8/33]

Два интересных, но малоизвестных значения привычного свойстваbackground-repeat, которое задаёт повторение фона, — этоroundиspace.

Значение свойства по умолчаниюbackground-repeat: repeatпросто повторяет фоновую картинку по всей ширине и высоте блока. Если части повторяющейся картинки не помещаются в ширину блока, то они просто обрезаются.

Если задать значениеbackground-repeat: round, то повторяющиеся картинки по краям блока обрезаться не будут, а равномерно растянутся или сожмутся по всей ширине, чтобы занять оставшееся пространство.

Кстати,background-repeatпринимает в качестве значения два аргумента: режим повторения по горизонтали и по вертикали. Если передать один параметр, то он применится к обоим направлениям. Например:

/* повторение фона repeat по горизонтали и вертикали */
background-repeat: repeat;

/* повторение фона round по горизонтали и repeat по вертикали */
background-repeat: round repeat;

Давайте опробуем режим повторенияroundна практике.

Повторение фона: background-repeat: space[9/33]

Режим повторения фонаbackground-repeat: spaceпохож наround, при нём части картинки тоже не обрезаются. Отличие в том, что повторяющиеся фоновые картинки не сжимаются или растягиваются, а для компенсации ширины блока между ними добавляется пустое пространство.

Попробуем, как работает это свойство.