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
  Подписаться  
Уведомление о