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. Пример использования нескольких фоновых изображений
  • Артем

    Почему не задается фоновая картинка элементу с position absolute, relative??

    • Здравствуйте. Предлагаю рассмотреть несколько вариантов. Если в вашем случае разметка отличается, прошу дать уточнение.
      1. Если пустой элемент позиционируется относительно элемента body с помощью position absolute/relative и для него заданы ширина и высота, то для него можно установить фон (картинку, цвет или градиент).
      2. Если непустой элемент позиционируется относительно элемента body с помощью position absolute/relative, то для него можно задать фон (картинку, цвет или градиент).
      3. Если непустой элемент с position: absolute находится внутри элемента-контейнера с position: relative, и для элемента-контейнера высота не задана, то для него нельзя установить фон, так как абсолютно позиционированные элементы удаляются из основного потока страницы и высота элемента-контейнера станет равной нулю.
      Для вложенного элемента с position absolute фон задать можно. При этом ширина абсолютно позиционированного элемента станет равной ширине его содержимого, а не родительского элемента. В данном случае, нужно установить width: 100%.

  • Fktrctq

    Подскажите как размножить фон по х и у с отступом сверху на 400рх?

    • Посмотрите пример http://codepen.io/nazarelen/pen/wGJJLx.

      • Fktrctq

        у меня фон накладывается в коде перед body в html
        с вашим примером размножается на весь экран без отступа

        • Данный способ не сработает для пустых элементов, потому что обрезка фона background-clip: content-box; происходит только для блока с содержимым. Если у вас есть разметка страницы — напишите ее, посмотрю, что ещё можно сделать.

  • Talib-D 24

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

    • Может, если для дочернего элемента задать padding http://codepen.io/nazarelen/pen/wWovpN. Если для родительского элемента не задана высота, он по умолчанию принимает высоту, равную высоте содержимого дочернего блока, в данном случае текста.

  • Юлия Горшкова

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

    Задание:
    Пришла зима. Наступило время подумать
    о новогодних подарках!

    Текст поверх картинки
    Количество — 100
    Нельзя пропустить

    Текст поверх картинки
    Количество — 150
    Нельзя пропустить

    Текст поверх картинки
    Количество — 20
    Нельзя пропустить



    На картинке отмечены области где должен будет вводится текст и вставляться картинки. За ранее благодарю https://uploads.disquscdn.com/images/89309965a41b516f49824ed64a93d9a6c46d66f42af92827cb3a97d42acc4981.png https://uploads.disquscdn.com/images/50c7239f011277e590f4bddcb4822a127f2124632882eeda5adb665853941ab2.png

    • Здравствуйте, посмотрите пример http://codepen.io/html5book/pen/MbdqpP. Вам нужно задать для блока с картинкой относительное позиционирование, а для всего что внутри — абсолютное. Смещение нужно указывать относительно верха и левой стороны, точные размеры можно определить в фотошопе. Единственное, у вас будет проблема с маленькими картинками, так как они не квадратные и заходят на блоки с текстом, как вы можете видеть. https://uploads.disquscdn.com/images/7f965fbf0c24b62f9526df9fde7bc93f48d692aecb5298888da6149ec2b7ac8a.png

      • Юлия Горшкова

        Спасибище вам, просто нет слов!!!! Провозилась целый день с этим кодом, а решение вот оно. Благодарю за помощь.

  • Здравствуйте! Это свойство было изначально придумано для IE.
    Воспроизвести эффект увеличения при наведении можно с помощью свойства transform: scale(), посмотрите пример https://codepen.io/html5book/pen/oZQPNY.
    Точка начала координат задаётся с помощью свойства transform-origin. Подробнее вы можете прочитать https://html5book.ru/css3-transform/
    P.S. title — это не свойство, а атрибут для тега.