Итак, с помощью свойства
background можно установить
цвет, положение, изображение, привязку и повторяемость фона как для
отдельного элемента, так и для всего сайта. Последнее, по сути, является
заданиям настроек для тэга body. Рассмотрим все свойства, связанные с
фоном (background). Если вы только учитесь, то самым лучшим вариантом
усвоения урока будет практическое применение свойства в таком же
порядке, как я рассматриваю ниже:
background-color – задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:
/* черный фон сайта */
body {
background-color: #000;
}
/* черный фон заголовка, белый цвет шрифта */
h1 {
color: #fff;
background-color: #000;
}
|
background-image – используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
body {
background-color: #000;
background-image: url ("my-image.jpg");
}
|
Обратите внимание как указан путь к изображению – это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.
background-size – определяет размер фонового изображения.
div {
background: url(my-image.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
|
Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto – например для одной из стороны картинки – 500px auto). Данное свойство применяется для создания
фона для сайта с картинкой на весь экран.
Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.
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: #000 url("my-image.jpg") no-repeat fixed left bottom;
|
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Комментарии
Отправить комментарий