Какое свойство определяет в качестве фона изображение
Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.
Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent.
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.
Свойства фона html-элементов
1. Базовый цвет: свойство background-color
Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.
Свойство не наследуется.
| background-color | |
|---|---|
| Значения: | |
| цвет | Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-color: salmon;
background-color: #00ff00;
background-color: rgba(255, 128, 128, 0.5);
background-color: currentColor;
background-color: transparent;
background-color: inherit;
background-color: initial;
Рис. 1. Свойство background-color для разных элементов
2. Источник изображения: свойство background-image
Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.
Семантически важные изображения должны предоставляться в разметке документа, например, с тегом <img>.
Свойство не наследуется.
| background-image | |
|---|---|
| Значения: | |
| изображение | Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-image: none;
background-image: url(https://site.ru/rose.png);
background-image: url(tl.png), url(tr.png);
background-image: linear-gradient(white, gray);
background-image: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);
background-image: image(«sprites.svg#xywh=40,0,20,20»);
background-image: inherit;
3. Укладка изображений: свойство background-repeat
Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.
| background-repeat | |
|---|---|
| Значения: | |
| repeat-x | Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat. |
| repeat-y | Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat. |
| repeat | Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat. Значение по умолчанию. |
| space | Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space. |
| round | Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round. |
| no-repeat | Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: inherit;
background-repeat: initial;
Рис. 2. Свойство background-repeat
4. Фиксация изображения: свойство background-attachment
Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.
Свойство не наследуется.
| background-attachment | |
|---|---|
| Значения: | |
| scroll | Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
| fixed | Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
| local | Фоновое изображение прокручивается вместе с содержимым элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;
background-attachment: initial;
5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.
Свойство не наследуется.
| background-position | |
|---|---|
| Значения: | |
| % | Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%. |
| длина | Значение длины дает фиксированную длину в качестве смещения. |
| left | Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края. |
| center | Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано. |
| right | Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края. |
| top | Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края. |
| bottom | Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 0 0, center;
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
background-position: inherit;
background-position: initial;
Если указано только одно значение, второе значение считается center. Если заданы два значения в единицах длины или %, то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.
Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.
Если заданы три или четыре значения в единицах длины или %, то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.
Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.
Рис. 3. Свойство background-position
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
div {
background-color: #FCF8F7;
height: 120px;
background-image: url(https://html5book.ru/images/flower112.png);
background-position: left bottom;
background-repeat: repeat-x;
}
Рис. 4. Фоновое изображение по низу блока
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
div {
width: 660px;
background-color:#E0E4EF;
height: 300px;
background-image: url(https://html5book.ru/images/flower112.png), url(https://html5book.ru/images/leaf112.png),
url(https://html5book.ru/images/flower221.png);
background-repeat: repeat-x;
background-position: 0 250px, 0 150px, 0 98px;
}
Рис. 5. Задание для блока нескольких фоновых изображений
6. Область рисования: свойство background-clip
Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.
Свойство не наследуется.
| background-clip | |
|---|---|
| Значения: | |
| border-box | Фон закрашивает область в пределах рамки элемента. Значение по умолчанию. |
| padding-box | Фон закрашивает область в пределах внутренних полей элемента. |
| content-box | Фон закрашивает только область содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: inherit;
background-clip: initial;
Рис. 6. Свойство background-clip
7. Область расположения фона: свойство background-origin
Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).
Свойство не наследуется.
| background-origin | |
|---|---|
| Значения: | |
| padding-box | Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию. |
| border-box | Фон позиционируется относительно верхних границ рамки элемента. |
| content-box | Фон позиционируется относительно верхних границ области содержимого элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-origin: inherit;
background-origin: initial;
Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.
Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.
Рис. 7. Свойство background-origin
8. Размер изображений: свойство background-size
Свойство background-size устанавливает размер фоновых изображений.
Свойство не наследуется.
| background-size | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. |
| длина | Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em. |
| % | Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. |
| cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
| contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: inherit;
background-size: initial;
Рис. 8. Свойство background-size
9. Краткая запись свойств фона: свойство background
Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.
Синтаксис
background: gold;
background: url(«rose.png») repeat-y;
background: border-box red;
background: no-repeat center/80% url(«../img/icon.png»);
10. Множественные фоны
Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image. Значение none по-прежнему создает слой.
Пример
div {
width: 680px;
height: 630px;
background-image: url(https://html5book.ru/wp-content/uploads/2015/02/flower_rose.png), url(https://html5book.ru/wp-content/uploads/2015/02/love.png), url(https://html5book.ru/wp-content/uploads/2015/02/border_white.png);
background-repeat: no-repeat;
background-position: bottom right, center center, top left;
}
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Рис. 9. Пример использования нескольких фоновых изображений
По материалам CSS Backgrounds and Borders Module Level 3
Здравствуйте, уважаемые читатели блога 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 служит для задания цвета фона и имеет следующий синтаксис:
background-color: transparent|<цвет>|inherit
Значение 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 может принимать следующие значения:
background-repeat:no-repeat|repeat|repeat-x|repeat-y
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: <горизонтальная позиция> [<вертикальная позиция>]
Горизонтальная позиция может принимать следующие значения:
<числовое значение>|left|center|right
В качестве числовых значений могут использоваться как абсолютные (например px), так и относительные величины (например проценты) и они указывают местоположение фонового изображения в элементе по горизонтали.
- left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру элемента;
- right — фон прижимается к правому краю элемента.
Вертикальная позиция может иметь следующие значения:
<числовое значение>|top|center|bottom
Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.
- 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 правило:
background-repeat:no-repeat;
background-position:100%;
или
background-repeat:no-repeat;
background-position:right;
Вообще соотношение между ключевыми словами и процентной записью следующее:
- 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 может принимать следующие значения:
background-attachment: scroll|fixed;
scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
Обычно фиксируют фоновый рисунок заданный для все веб страницы, а для отдельных элементов оставляют прокручивающийся фон.
Сборное правило background
Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.
Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:
background: url (//webcodius.ru/example/logo.png) 50% no-repeat;
А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:
background-color: #cccccc;
или просто
background: #cccccc;
Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!