Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > CSS учебник > Фон в CSS

Фон в CSS

«Фон в CSS » – четвертый урок учебника CSS. Здесь мы обсудим создание, использование и настройку отображения фона в CSS.

CSS предоставляет множество инструментов для работы с фоном, которые позволяют создать действительно уникальный и гармоничный для вашего сайта фон.

Параметры фона в CSS.

Background–attachment – определяет привязку фона на странице. Значение scroll – привязывает фон к полосе прокрутки (при прокрутке фон будет оставаться на месте) и значение fixed – привязывает фон к виртуальной оси координат (при прокрутке фон будет прокручиваться вместе со всей страницей).

Background–color – заполняет элемент цветом. Значение color – задает цвет элемента, а значение transparent – задает прозрачный фон.

.jj {
background – color : Red;
}

Background–image – позволяет использовать изображение в качестве фона.

none – фоновое изображение не используется

url – позволяет задать путь к изображению

.nn {
background – image : url(img/dog.gif);
}

Background–position – задает начальное положение фонового изображения и может принимать следующие значения:

.o1 {
background – image : url(img/dog.gif);
background – position : left;
background – repeat : repeat;
}
.o2 {
background – image : url(img/dog.gif);
background – position : right;
background – repeat : no – repeat;
}
.o3 {
background – image : url(img/dog.gif);
background – position : bottom;
background – repeat : repeat – x;
}
.o4 {
background – image : url(img/dog.gif);
background – position :top;
background – repeat : repeat – y;
}
.o5 {
background – image : url(img/dog.gif);
background – position : 40% 60%;
background – repeat : repeat – x;
}
.o6 {
background – image : url(img/dog.gif);
background – position : 80px 100px;
background – repeat : no – repeat;
}

При задании координат посредством ключевых слов, то если задано только одно слово (например top), то второе принимается равным center. При задании координат посредством процентов, если задано только одно значение, то второе принимается равным 50%. При указании положения в процентах или координатно, можно смешивать значения, например (30% 500).

Background – repeat – задает метод тиражирования изображения. Может принимать следующие значения:

Пример можете видеть сверху.


CSS позволяет настроить отображение фона на странице и в данном уроке вы в этом убедились. Стоит сказать, что фон в CSS может быть не только у всей страницы, но и у любого ее элемента. В наших примерах фон установлен для ячеек таблицы.

В следующем уроке мы поговорим о работе со списками. Настроим отображение элементов списка, разберемся с упорядоченными и неупорядоченными списками.