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
