Общие сведения
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat]
Свойства
1. background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
background-attachment: fixed
Делает фоновое изображение элемента неподвижным.background-attachment: scroll
Позволяет перемещаться фону вместе с содержимым.
2. background-color - определяет цвет фона элемента.
background-color: transparent
Устанавливает прозрачный фон.background-color: #20bb20
Устанавливает фон определенного цвета (не забывайте про решетку перед самим кодом цвета)background-color: rgba(red, green, blue, A)
rgba() - это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется. значения red, green, blue для определенного цвета вы можете подсмотреть в фотошопе (link), альфа-канал задает нужную степень прозрачности цвета. В итоге свойство будет выглядеть примерно так: background-color: rgba(122, 173, 208, 0.7)
3. background-image - устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
background-image: none
Отменяет фоновое изображение для элемента.background-image: url(путь к файлу)
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
4. background-position - задает начальное положение фонового изображения, установленного с помощью свойства background-image.
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
• 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% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
background-position: top center
5. background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
background-repeat: repeat
Фоновое изображение повторяется по горизонтали и вертикали.background-repeat: no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу).background-repeat: repeat-x
Фоновый рисунок повторяется только по горизонтали.background-repeat: repeat-y
Фоновый рисунок повторяется только по вертикали.
6. background-clip - определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Warning! Свойство полностью поддерживается только браузерами Firefox и IE.
background-clip: padding-box
Фон отображается внутри границ.background-clip: border-box
Фон выводится под границами.background-clip: content-box
Фон отображается только внутри контента.
7. background-origin - определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
background-origin: padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.background-origin: border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.background-origin: content-box
Фон позиционируется относительно содержимого элемента.
8. background-size - масштабирует фоновое изображение согласно заданным размерам.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.Пример (растягивается по ширине, при разрешенном дублировании фона - будет размножаться по вертикали): background-size: 100% auto
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.
Safari и Chrome используют нестандартное свойство -webkit-background-size.
Opera до версии 10.53 использует нестандартное свойство -o-background-size.
Два фона и больше
Многие задавались вопросом - как можно поставить на форум два и более фоновых рисунка? Для форумов "mybb и партнеры" можно использовать достаточно простой способ:
body {background: #цвет_фона url("фон-первый") top center;}
#pun_wrap {background: transparent url("фон-второй") top center no-repeat; }
В этом способе не стоит использовать дополнительных констукций вроде background-atachment: fixed, лучше вносить все поправки под обобщенное свойство background.
Второй фон "накладывается" на первый, подходит для размещения широких шапок [при условии, что вы поставите верхний отступ для самой ленты-подложки форума (элемент #pun) ]
Второй способ - хитрее.
Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Требуется, например, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми.
#pun {background:
url(картинка-верх) top center no-repeat,
url(картинка-низ) bottom center no-repeat,
url(картинка-справа) right no-repeat,
url(картинка-слева) left no-repeat;
}
Теги: css, стиль, дизайн, фон, background