Закрепление фона

Повторение мозаики

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

Применяется: Ко всем элементам

Наследуется: Нет

Начальное значение: repeat

Свойство background-repeat управляет тиражированием фонового изображения.

background-repeat: repeat – применяется по умолчанию,

background-repeat: repeat-x – тиражирование по горизонтали

background-repeat: repeat-y – тиражирование по вертикали

background-repeat: no-repeat – изображение появляется только 1 раз

Например:

div.horiz { background-image: url(star.gif); background-repeat: repeat-x; }

div.vert { background-image: url(star.gif); background-repeat: repeat-y; }

Размещение изображений (позиционирование)

Свойство background-position указывает начальную позицию исходного изображения на фоне данного элемента. Начальным положением по умолчанию является левый верхний угол области заполнения элемента. Изображение не выходит за границы элемента.

Значениями свойства background-position могут являться: ключевые слова (left, center, right, top, bottom), единицы длины, значение в процентах.

Ключевые слова обычно используют попарно. Рекомендуется указывать в порядке «горизонталь и вертикаль». Например:

background-position: left top;

background-position: right center; // если указано одно значение,

background-position: center bottom; //вторым принимается «center»

Единица длины задает координаты левого верхнего угла изображения относительно левого верхнего угла области заполнения элемента (X Y).

background-position: 150px 15px

Допускается задание отрицательных значений.

Значение в процентах обеспечивает более точный контроль над положением изображения, чем ключевые слова. Задаются значения в процентах парами («горизонталь и вертикаль»). Значениями по умолчанию являются (0% 0%).

Действие пары распространяются на область фона (данного элемента) и непосредственно на рисунок. Например, пара значений:

- 50% 50% - располагает центр рисунка в центре самого элемента;

- 100% 100% - располагает нижний угол рисунка в правом нижнем углу элемента;

- 10% 25% - соотносит точку, отстоящую на 10% от левого и на 25% от верхнего края изображения, с такой же точкой на элементе.

При указании одной величины, вторая предполагается равной 50%.

background-attachment: scroll | fixed | inherit

Начальное значение: scroll – рисунок фона будет перемещаться вместе с содержимым.

Свойство background-attachment: fixed – прикрепляет рисунок к определенной позиции по отношению к зоне просмотра (а не самого элемента).

body { background-image: url(stripes.gif);

background-position: top;

background-repeat: no-repeat;

background-attachment: fixed; }

Примеры занимательных применений по адресу www.meyerweb.com/eric/css/edge/complexspiral/glassy.html.

Дата добавления: 2014-01-13