Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже: background-color - задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:
Code
/* черный фон сайта */
body {
background-color: #000;
}
/* черный фон заголовка, белый цвет шрифта */
h1 {
color: #fff;
background-color: #000;
}
background-image - используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
Code
body {
background-color: #000;
background-image: url ("my-image.jpg");
}
Обратите внимание как указан путь к изображению - это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению. background-repeat - используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:
* background-repeat: repeat-x - изображение повторяется только по горизонтали
* background-repeat: repeat-y - изображение повторяется только по вертикали
* background-repeat: repeat - изображение повторяется по горизонтали и вертикали
* background-repeat: no-repeat - изображение не повторяется
background-attachment - данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
* background-attachment: scroll - прокручивается вместе со страницей
* background-attachment: fixed - при прокрутке фон остается неподвижным
background-position - задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
* в фиксированных единицах (пикселы, сантиметры)
* в процентах
* словесно: - top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
Рассмотрим примеры:
* background-position: 20px 50px - изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
* background-position: 50% 25% - расположено по центру по горизонтали и отступает на 25% сверху.
* background-position: right bottom - рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Например:
Code
background: #000 url("my-image.jpg") no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
Главная
Форум
Профиль
Шаблоны
Скрипты
Регистрация
Вход
