HTML+CSS Стили для фона

Уроки HTML+CSS: Стили для фона

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

Оставить комментарий

avatar
  Подписаться  
Уведомление о