Свойство BACKGROUND-REPEAT

Вы наверное заметили, что фоновое изображение по умолчанию повторяется начиная с верхнего левого угла, как по вертикали, так и по горизонтали,, пока не заполнит весь экран. Так вот, с помощью свойства background-repeat мы можем контролировать эти повторения.

Это свойство может принимать четыре значения:

Это очень полезное свойство, и аналогов ему в html нет.

Пример записи стиля:

BODY {

background-image: url(smile.png);

background-repeat: repeat-x;

}

Задание 4.

Выполните все 4 варианта повторений фоновой картинки на разных страницах:

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

Свойство BACKGROUND-ATTACHMENT

При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:

SCROLL - фон прокручивается вместе с содержимым;

FIXED - фон строго зафиксирован.

BODY {

background-image: url(smile.png);

background-repeat: no-repeat;

background-attachment: scroll;

}

BODY {

background-image: url(smile.png);

background-repeat: no-repeat;

background-attachment: fixed;

}

Задание 5.

Выполните все 2 варианта закрепления фоновой картинки на разных страницах:

Значение по умолчанию - scroll, т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

Задание 6.

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