Свойство background
Как я уже упоминала ранее, каждый элемент в дереве документа по факту является прямоугольной коробкой. Каждая из этих коробок имеет фон, который может быть полностью прозрачным, залит сплошным цветом или содержать картинку. Фон регулируется при помощи 8 CSS свойств (плюс один шорткат).
background-color
Свойство background-color задает цвет для фона элемента. Значением может быть любое допустимое значение цвета или ключевое слово transparent.
Цвет фона отрисовывается в той области блока, которая обозначена при помощи свойства background-clip. Если вы так же установите фоновую картинку, то цветной слой отрисуется за ней. В отличии от слоя с изображением, который может содержать несколько картинок, мы можем задать только одно значение для слоя цвета.
background-image
Свойство background-image устанавливает фоновое изображение (или несколько изображений) для элемента. Обычно значением является адрес картинки, который прописывается внутри конструкции url(). Значение none так же может быть использовано. Слой будет учитываться, но он будет пустым.
Мы так же можем указать через запятую несколько фоновых изображений. Каждое последующее изображение будет помещаться за предыдущим.
background-repeat
Свойство background-repeat отвечает за “плиточную раскладку” картинки после того, как она приобрела свои конечные размеры (заданные свойством background-size) и была спозиционирована (при помощи background-position).
Значением этого свойства может быть одно из ключевых слов — repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), остальные значения могут быть заданы один раз для обеих осей одновременно или для каждой по отдельности.
background-size
Свойство background-size определяет размер фонового изображения. Значением могут быть ключевые слова, точные размеры или размеры в процентах.
Ключевыми словами являются contain и cover. Ключевое слово contain будет масштабировать изображение до наибольшего размера при условии, когда его ширина или высота могут поместится в пределы области блока. С другой стороны cover масштабирует картинку до минимально возможного размера чтобы закрыть всю область блока.
В случае точных размеров и размеров в процентах мы можем указать значения для ширины и высоты фоновой картинки. Значение в процентах будет рассчитываться от размера элемента.
background-attachment
Свойство background-attachment контролирует, как фоновое изображение будет прокручиваться по отношению к видимой области страницы и элементу. Есть три доступных значения.
Ключевое слово fixed означает, что фоновое изображение фиксируется на экране и не двигается при прокрутке страницы. local означает, что фон закреплен на его позиции в элементе. Если у элемента будет полоса прокрутки, а фоновое изображение находится вверху, при прокрутке элемента вниз фоновое изображение останется вне поля видимости. И наконец, scroll означает, что изображение фона фиксируется и не прокручивается даже если элемент имеет полосу прокрутки.
background-position
Это свойство, в сочетании со свойством background-origin, определяет, где будет располагаться фоновое изображение. Значением может быть ключевое слово, число или проценты и мы можем указать положение вдоль осей x и y.
Доступные ключевые слова: top, right, bottom, left и center. Мы можем использовать эти ключевые слова в любых комбинациях. Если указано только одно ключевое слово, то второе значение по умолчанию будет center.
Для значения в числах или процентах мы можем указать отдельно положение по оси x и оси y. Процентное значение высчитывается по отношению к размерам элемента.
Как сделать фон по бокам в html
Фон элемента описывается в CSS свойством background . Фактически это свойство представляет сокращение набора следующих свойств CSS:
background-color : устанавливает цвет фона
background-image : в качестве фона устанавливается изображение
Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png .
Также можно использовать абсолютные адреса URL, например:
Либо можно использовать относительные адреса — относительно html-документа или корневого каталога сайта:
background-repeat : устанавливает режим повторения фонового изображения по всей поверхности элемента
background-size : устанавливает размер фонового изображения
background-position : указывает позицию фонового изображения
background-attachment : устанавливает стиль прикрепления фонового изображения к элементу
background-clip : определяет область, которая вырезается из изображения и используется в качестве фона
background-origin : устанавливает начальную позицию фонового изображения
Первый блок окрашен в оттенок красного цвета, а второй блок устанавливает в качестве фона изображение. Все содержимое блока накладывается поверх фона:
Повторение изображения
На выше приведенном скриншоте видно, что CSS должным образом масштабирует изображение, чтобы наиболее оптимально вписать его в пространство элемента. Однако в связи с масшатбированием изображение может не полностью покрывать поверхность элемента, и поэтому для полного покрытия автоматически CSS начинает повторять изображение.
С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:
repeat-x : повторение по горизонтали
repeat-y : повторение по вертикали
repeat : повторение по обеим сторонам (действие по умолчанию)
space : изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
round : изображение должным образом масштабируется для полного заполнения всего пространства
no-repeat : изображение не повторяется
Размер изображения
Свойство background-size позволяет установить размер фонового изображения. Для установки размера можно использовать либо единицы измерения, например, пиксели, либо проценты, либо одно из предустановленных значений:
contain : масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
cover : масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
auto : значение по умолчанию, изображение отображается в полный размер
Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:
Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:
Можно задать точное значение для одного измерения — ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:
Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности:
Позиция изображения
Свойство background-position управляет позицией фонового изображения внутри элемента. Оно может принимать отступы от верхнего левого угла элемента в единицах измерения, например, в пикселях в следующем формате:
Кроме того, данное свойство может принимать одно из следующих значений:
top : выравнивание по верхнему краю элемента
left : выравнивание по левому краю элемента
right : выравнивание по правому краю элемента
bottom : выравнивание по нижнему краю элемента
center : изображение располагается по центру элемента
Здесь изображение выравнивается по верху и правому краю, то есть будет располагаться в правом верхнем углу элемента.
background-attachment
Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:
fixed : фон элемента фиксирован вне зависимости от прокрутки внутри элемента
local : по мере прокрутки внутри элемента фон изменяется
scroll : фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов
background-origin
Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:
border-box : фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
padding-box : фон устанавливается с учетом внутренних отступов
content-box : фон устанавливается по содержимому элемента
Используем все три значения:
background-clip
Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:
border-box : изображение обрезается по границам элемента
padding-box : из изображения исключается та часть, которая находится под границами элемента
content-box : изображение обрезается по содержимому с учетом внутренних отступов
Например, если к предыдущей разметке мы применим следующие стили:
Тогда мы получим следующий результат:
Свойство background
Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:
Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов
Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.
Если же вы впервые слышите о каскадных таблицах стилей, то предлагаю вам для начала ознакомиться со статьей о том, что такое css и как их подключить к html документу.
Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:
- background-color — задает цвет фона для любого Html элемента;
- background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
- background-repeat — параметр повторения фоновой картинки;
- background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
- background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.
Далее рассмотрим подробнее каждое свойство.
Background-color и background-image
Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.
Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:
Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.
Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:
<p style=»background-color:#000000; color:#ffffff»>У этого абзаца черный фон и белый текст</p>
Либо так в коде CSS файла:
p <
background-color:#000000;
color:#ffffff
>
У этого абзаца черный фон и белый текст
Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:
background-image: none|url (<интернет-адрес файла изображения>)
По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:
<p style=»background-image: url (//webcodius.ru/example/fonp.jpg)»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.</p>
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.
А вот оригинальный вид фонового изображения:
Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.
Как вы могли заметить из примера, если фоновое изображение меньше, чем элемент страницы, для которого оно задано, то картинка повторяется по вертикали и горизонтали пока не замостит собой весь элемент. Параметры этого повторения задает следующий элемент.
Background-repeat — параметры повторения фонового изображения
Свойство background-repeat может принимать следующие значения:
no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:
<p style=»background-image: url (//webcodius.ru/example/fonp.jpg); background-repeat:no-repeat;»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.</p>
В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.
repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.
repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.
repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.
Позиционирование фона с помощью background-position
Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:
background-position: <горизонтальная позиция> [<вертикальная позиция>]
Горизонтальная позиция может принимать следующие значения:
В качестве числовых значений могут использоваться как абсолютные (например px), так и относительные величины (например проценты) и они указывают местоположение фонового изображения в элементе по горизонтали.
- left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру элемента;
- right — фон прижимается к правому краю элемента.
Вертикальная позиция может иметь следующие значения:
Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.
- top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру;
- bottom — фон прижимается к нижнему краю.
В случае использования ключевых слов для задания вертикальной и горизонтальной позиции, то порядок их следования не имеет значения. Если же, например, использовать пиксели или процентную запись, то сначало задается положение фонового рисунка по горизонтали, а затем, через пробел, положение по вертикали.
Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:
background-image:url (//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;
Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.
То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:
Вообще соотношение между ключевыми словами и процентной записью следующее:
- top left = left top = 0% 0% (выравнивание по левому верхнему углу)
- top = top center = center top = 50% 0% (вверху по центру)
- right top = top right = 100% 0% (по правому верхнему углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (по левому нижнему углу)
- bottom = bottom center = center bottom = 50% 100% (внизу по центру)
- bottom right = right bottom = 100% 100% (по правому нижнему углу)
На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.
Фиксация фона background-attachment
По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:
scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
Обычно фиксируют фоновый рисунок заданный для все веб страницы, а для отдельных элементов оставляют прокручивающийся фон.
Сборное правило background
Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.
Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:
background: url (//webcodius.ru/example/logo.png) 50% no-repeat;
А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:
Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!
Фон для сайта CSS/HTML
В этом разделе найдутся полезные подсказки, как можно красиво оформить фон для сайта. Фон может быть картинкой, градиентом, прокручиваться и повторяться, может быть и анимированным, в зависимости от того, чего требуется в дизайне.
Как сделать фон для сайта CSS
Фон для сайта цветом можно сделать с помощью свойства background, применив его к тегу body. Таким же образом можно задать фон и другим элементам на сайте. Для примера, создадим div и применим к нему свойство background с цветом.
Пример
Как сделать фон картинкой на весь экран CSS
Для того, чтобы сделать фон картинкой на весь экран, необходимо использовать свойство background-image. Чтобы картинка была на всю ширину фона, нужно в объявлении прописать значение cover. Для примера создадим div, а для фона сайта нужно прописать свойство к тегу body.
Пример
Как сделать фон размытым CSS
Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.