Фон в 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 – задает начальное положение фонового изображения и может принимать следующие значения:

top – left – верхний левый угол экрана
top – center – верхний центральный
top – right – верхний правый
center left – центральный левый
center center – центр экрана
center right – центральный правый
bottom left – нижний левый
bottom center – нижний центральный
bottom right – нижний правый угол экрана
%(x y) – задание положения в % (верхний левый 0% 0%)
pixels(x y) – задание положения в пикселях (верхний левый 0 0)

.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 – задает метод тиражирования изображения. Может принимать следующие значения:

repeat – тиражирование в обоих направлениях
no – repeat – изображение выводится только один раз
repeat – x – тиражирование по горизонтали
repeat – y – тиражирование по вертикали.

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

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

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

Наверх

Источник: Создание сайтов