Думаю, нет ни одного сайта, где не использовалось бы свойство CSS background. Казалось бы, что может быть проще этого свойства? Но нет, его возможности гораздо шире обычного назначения картинки или цвета в качестве фона страницы. Что-то будет знакомым, а что-то наверняка для многих станет новинкой. В любом случае — досконально знать, как работает background будет полезно.
CSS3 привнес немало нового в свойство, это и прозрачность, и назначение нескольких изображений в качестве фона, но об этом мы поговорим ниже, а для начала рассмотрим основы свойства background.
background-color
Я более чем уверен — вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную(используется название цвета), шестнадцатиричную или RGB-запись. Каждый тип равнозначен, используйте какой больше нравится. Я стараюсь использовать наиболее короткий вариант, и для восприятия попроще и файл стилей чуть поменьше получается размером.
|
1
2
3
4
|
p {background-color: red;}p {background-color: #f00;}p {background-color: #ff0000;}p {background-color: rgb(255, 0, 0;)} |
В CSS3 внедрена поддержка прозрачности, поэтому можно и ее добавить к нашему цвету, например так:
|
1
|
p {background-color: rgba(255, 0, 0, 0.5);} |
Последней цифрой установили прозрачность в 50%. Можно установить значение прозрачности от 0 (полностью прозрачный фон) до 1 (полностью непрозрачный).
background-image
Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена
|
1
|
body {background-image: url("image1"), url("image2"), url("image3")} |
Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:
- задайте контрастный цвет фона на тот случай, если у пользователя по каким-то причинам не отобразится картинка. Он может банально отключить отображение картинок, экономит трафик.
- не используйте фоновое изображение для передачи какой-либо важной информации. По причине указанной выше, пользователь может и не увидеть.
Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.
background-repeat
C точки зрения технической оптимизации — очень полезное свойство . Позволяет размножить одну маленькую картинку на большую площадь. При этом, картинка должна быть бесшовной, чтобы не было видно границ. Может принимать 6 различных значений, 4 из которых я раньше использовал, а вот два последних стали для меня открытием.
Итак, подробнее:
- no-repeat. Картинка не повторяется, все просто
- repeat-x. Повторяется только по горизонтали
- repeat-y. Только по вертикали
- repeat. Как по горизонтали, так и по вертикали.
- space. Все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются
- round. Аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения
Возьмем пример из предыдущего раздела, с несколькими изображениями и применим заполнение:
|
1
2
3
|
body {background-repeat: no-repeat, repeat-y, space;} |
Первое не будет повторяться, второе будет, но только по вертикали и третье заполнит всю доступную область.
background-attachment
Свойство определяет, как будет вести себя фон при изменении области просмотра. Самый яркий пример — будет ли он сдвигаться при прокрутке? Честно говоря, считаю его бесполезным, не припомню, чтобы когда-либо применял подобный эффект, но некоторым нравится.
Может быть присвоено три значения:
- fixed. Изображение не прокручивается
- local. Изображение прокручивается с контентом, но не с элементом, его содержащим.
- scroll. Изображение прокручивается с элементом, его содержащим.
background-position
А вот одно из самых важных свойств. Определяет, где конкретно будет расположен фон. По умолчанию, он располагается в верхнем левом углу окна браузера. Можно устанавливать положение по горизонтали, вертикали или по обеим сторонам. В случае горизонтали это центр, слева и справа (center, left,right), вертикаль это центр, сверху и снизу (center, top, bottom). Также прекрасно распознаются значения в процентах или пикселах, например так:
|
1
2
3
|
body {background-position: right 20px;} |
Эта запись означает, что фон будет располагаться справа и на 20px смещен вниз. Когда используется два значения — первое обозначает горизонтальное расположение, а второе — вертикальное. Когда только одно значение — второе по умолчанию будет в центре.
При процентной записи — отсчет идет из верхнего левого угла. Например, такая запись:
|
1
2
3
|
body {background-position: bottom 10px right 20%;} |
переместит фон на 10px от нижнего края и на 20% от правого.
background-clip
Свойство появилось с приходом CSS3, поддерживается хорошо. Все браузеры, кроме IE8 и ниже — замечательно с ним работают. Свойство определяет, как фоновая заливка или изображение должны отображаться под границами элемента. Эффект заметен только в случае полупрозрачных или пунктирных границ, показано на иллюстрации (взял на htmlbook.ru, очень уж удачная)
- padding-box. Фон будет отображаться без учета границы
- border-box. Фон на весь размер блока
- content-box. Фон без учета границы и отступа.
Полезность свойства вызывает сомнения, но все же, может кому и пригодится.
background-origin
Свойство практически полностью аналогично предыдущему, с той разницей, что оно обозначает, как будет расположен фон. Значения аналогичны предыдущему. И небольшое уточнение — если свойство background-attachment имеет значение fixed — тогда это свойство работать не будет.
background-size
Хотя фон может быть любого размера, вы можете контролировать его размер на своей странице, как горизонтальный, так и вертикальный.
Значения могут быть как в процентной записи, так и в пикселах. Первое — горизонтальный размер, второе — вертикальный. Отрицательные значения не допускаются, имейте ввиду.
|
1
2
3
|
body {background-size: 500px 50%;} |
Если указано только одно значение — второе считается по умолчанию (auto или 100%, если это возможно).
Также, можно указать еще два значения, которые будут регулировать размер фонового изображения:
- contain. Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
- cover. Тоже самое, но масштабирует по короткой стороне.
Сокращенная запись
Независимо от того, в каком порядке указаны свойства в краткой записи, работать они будут. Но это не валидно (код будет неправильным с точки зрения стандартов), W3C рекомендует применять такой порядок:
body {
background-image: url("image.png");
background-position: top left;
background-size: 95% 95%;
background-repeat: no-repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: content-box;
background-color: #333};
}
Или краткий вариант записи:
body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}
Они идентичны, но второй вариант занимает намного меньше места и грузится быстрее.