CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве фона может использоваться изображение, цвет или градиент.
В данной записи я буду использовать ещё 2 свойства, для указания ширины(max-width
) и высоты(max-height
) элемента, которые помогут увидеть изменения.
background-color
— цвет фона
transparent |
Значение по умолчанию. Задает прозрачный фон для элемента. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
Как и в свойстве color
который задает цвет текста, background-color
может задавать цвет по названию или по специальному коду.
div{ max-width: 200px; max-height: 100px; background-color: green; }
div{ max-width: 200px; max-height: 100px; background-color: #008000; }
Стили для фонового изображения
Для фонового изображения использовал картинку размером 470 × 470
background-image
— фоновое изображение
url('URL') |
Абсолютный или относительный адрес изображения. |
none |
Значение по умолчанию, также удаляет изображение у элемента из группы элементов, для которых установлено фоновое изображение. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/173325_632_canny_pic.jpg"); }
Если дополнительно не обрабатывать фон, то он можете выглядит не совсем так как вы предполагали. В моем случае изображение слишком большое, поэтому из него вырезался кусок, который вы видите на экране.
Есть несколько дополнительных свойств, которые преобразовывать фон.
background-repeat
— повтор фоновых изображений
Если изображение маленького размера, оно по стандарту будет повторяться. Для того чтобы этого избежать или наоборот, вам нужно изменить данное свойство.
repeat |
Весь фон страницы будет заполнен фоновым рисунком. Если при этом задать background-position, то повтор будет осуществляться с указанной позиции. Значение по умолчанию. |
no-repeat |
Фоновое изображение не будет повторяться. |
repeat-x |
Фоновый рисунок повторяется от левого до правого края веб-страницы по верхнему краю страницы. |
repeat-y |
Фоновый рисунок повторяется от верхнего до нижнего края веб-страницы по левому краю страницы. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
По умолчанию background-repeat
имеет значение repeat
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: repeat; }
Для того чтобы изображение не повторялось, необходимо прописать значение no-repeat.
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: no-repeat; }
Если изображение имеет маленький размер и вам нужно сделать повтор по горизонтали, то необходимо указать значение repeat-x
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: repeat-x; }
Если изображение имеет маленький размер и вам нужно сделать повтор по вертикали, то необходимо указать значение repeat-y
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp-content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: repeat-y; }
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 |
Наследует значение свойства от родительского элемента. |
Для того чтобы разместить изображение по центру необходимо прописать для background-position значение center. Чтобы изображение не повторялось я пропишу background-repeat: no-repeat.
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp- content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: no-repeat; background-position: center; }
background-attachment
— фиксация изображения на месте
scroll |
Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
fixed |
Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
local |
Фоновое изображение прокручивается вместе с содержимым элемента. |
initial |
Устанавливает значение свойства в значение по умолчанию. |
inherit |
Наследует значение свойства от родительского элемента. |
По умолчанию стоит значение scroll. Для того чтобы закрепить изображение необходимо указать значение fixed.
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp- content/uploads/2018/12/css_3-cr-292x175.png"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
background-clip
— заполнение фоном отступов и границ элемента
border-box | Фон простирается до внешнего края границы элемента. Значение по умолчанию. |
padding-box | Фона простирается до внешнего края отступов элемента. |
content-box | Фон окрашивает только содержимое элемента. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
background-origin
— Положение фонового изображения относительно его родительского блока
padding-box | Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. Значение по умолчанию. |
border-box | Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента. |
content-box | Положение элемента вычисляется относительно верхнего левого угла содержимого. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
background-size
— размер изображения
auto | Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. |
px / em /cm | Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em. |
% | Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. |
cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Для того чтобы растянуть фон во всю ширину, необходимо для свойства background-size
задать значение cover
div{ max-width: 100%; max-height: 300px; background-color: url("http://prog-time.ru/wp- content/uploads/2018/12/css_3-cr-292x175.png"); background-position: center; background-size: cover; }
Информация была взята с сайта — https://html5book.ru