CSS Background. Полное руководство
Думаю, нет ни одного сайта, где не использовалось бы свойство 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;}Они идентичны, но второй вариант занимает намного меньше места и грузится быстрее.
