2.9. CSS-фон

css_backgroundCSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве изображения может выступать градиент или картинка. Для одного элемента можно задать несколько фоновых изображений.

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

Цвет фона и фоновые изображения на веб-странице

1. Цвет фона background-color

Свойство устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого. Не наследуется.

background-color
Значения:
цвет Цвет фона можно задать разными способами: HEX, RGB, RGBA, HSL, HSLA, а также с помощью 140 кроссбраузерных названий цветов.
transparent Значение по умолчанию. Задает прозрачный фон для элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-color: papayawhip;}
h1 {background-color: palevioletred;}
p {background-color: peachpuff;}
span {background-color: peru;}
background-color
Рис. 1. Свойство background-color для разных элементов

2. Фоновое изображение background-image

Свойство устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент, который задаётся с помощью функций background-image: linear-gradient(), background-image: radial-gradient() или с помощью функций повтора градиента background-image: repeating-linear-gradient(), background-image: repeating-radial-gradient(). Не наследуется.

background-image
Значения:
url('URL') Абсолютный или относительный адрес изображения.
none Значение по умолчанию, также удаляет изображение у элемента из группы элементов, для которых установлено фоновое изображение.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-image: url(https://html5book.ru/images/flower.png);}
table {background-image: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);}
p {background-image: linear-gradient(to top left, white, lightblue);}

3. Повтор фоновых изображений background-repeat

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

background-repeat
Значения:
repeat Весь фон страницы будет заполнен фоновым рисунком. Если при этом задать background-position, то повтор будет осуществляться с указанной позиции. Значение по умолчанию.
no-repeat Фоновое изображение не будет повторяться.
repeat-x Фоновый рисунок повторяется от левого до правого края веб-страницы по верхнему краю страницы.
repeat-y Фоновый рисунок повторяется от верхнего до нижнего края веб-страницы по левому краю страницы.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-repeat: no-repeat;}
div {background-repeat: repeat-x;}
div {background-repeat: repeat-y;}
div {background-repeat: repeat;}
13
Рис. 2. Свойство background-repeat

4. Позиционирование фоновых изображений background-position

Свойство управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений. Значение по умолчанию background-position: 0% 0%. Не наследуется.

background-position
Значения:
left top,
left center,
left bottom,
right top,
right center,
right bottom,
center top,
center center,
center bottom
Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center.
px / em/ % Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части изображения.
Процентное значение рассчитывается относительно самого изображения и относительно элемента-контейнера, в котором оно расположено. Например, при задании background-position:50% 50%; центр изображения совпадет с центром элемента-контейнера.
Одновременно можно комбинировать значения в px, em и %.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-position: center center;}
div {background-position: 50% 100%;}
div {background-position: left;}
div {background-position: 50px;}
15
Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

div {
background-color: #FCF8F7;
height: 120px;
background-image: url(https://html5book.ru/images/flower112.png);
background-position: left bottom;
background-repeat: repeat-x;
}
background_repeat_bottom
Рис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

div {
width: 660px;
background-color:#E0E4EF;
height: 300px;
background-image: url(https://html5book.ru/images/flower112.png), url(https://html5book.ru/images/leaf112.png), 
url(https://html5book.ru/images/flower221.png);
background-repeat: repeat-x;
background-position: 0 250px, 0 150px, 0 98px; 
}
16
Рис. 5. Задание для блока нескольких фоновых изображений

5. Фиксация изображения на месте background-attachment

Свойство позволяет фиксировать фоновое изображение при прокрутке страницы. Не наследуется.

background-attachment
Значения:
scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
local Фоновое изображение прокручивается вместе с содержимым элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-attachment: scroll;}
div {background-attachment: fixed;}
div {background-attachment: local;}

6. Заполнение фоном отступов и границ элемента background-clip

Свойство определяет, будет ли цвет фона ограничиваться содержимым элемента или будет простираться до внешнего края границы border. Не наследуется.

background-clip
Значения:
border-box Фон простирается до внешнего края границы элемента. Значение по умолчанию.
padding-box Фона простирается до внешнего края отступов элемента.
content-box Фон окрашивает только содержимое элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-clip: border-box;}
div {background-clip: padding-box;}
div {background-clip: content-box;}
12
Рис. 6. Свойство background-clip

7. Положение фонового изображения относительно его родительского блока background-origin

Свойство определяет, где будет позиционироваться фоновое изображение. Если одновременно задано свойство background-attachment: fixed, эффекта не будет.

background-origin
Значения:
padding-box Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. Значение по умолчанию.
border-box Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента.
content-box Положение элемента вычисляется относительно верхнего левого угла содержимого.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-origin: padding-box;}
div {background-origin: border-box;}
div {background-origin: content-box;}
background-origin
Рис. 7. Свойство background-origin

8. Размер изображения background-size

Свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали (background-image). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте. Не наследуется.

background-size
Значения:
auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
px / em /cm Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em.
% Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {background-size: 300px 150px;}
div {background-size: 50% 30%;}
div {background-size: cover;}
div {background-size: contain;}
14
Рис. 8. Свойство background-size

9. Задание фона элемента одним свойством background

Свойство позволяет описать в одном объявлении следующие свойства фона: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.

Синтаксис

body { 
background: #00ff00 url("smiley.gif") no-repeat fixed center; 
}

10. Множественные фоны

CSS3 предоставила еще одну полезную возможность — множественные фоны, которые можно задавать как для страницы целиком, так и для конкретного блока. Например:

div {
width: 680px;
height: 630px;
background-image: url(https://html5book.ru/wp-content/uploads/2015/02/flower_rose.png), url(https://html5book.ru/wp-content/uploads/2015/02/love.png), url(https://html5book.ru/wp-content/uploads/2015/02/border_white.png);
background-repeat: no-repeat;
background-position: bottom right, center center, top left;
}

Изображения нужно перечислять в порядке наложения, самое верхнее изображение должно быть первым, а самое большое, расположенное на заднем плане — последним.

backgrounds
Рис. 9. Пример использования нескольких фоновых изображений