↑ Наверх ↑

Свойство BACKGROUND-IMAGE

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

BODY { background-color : #FFEE8C ; background-image : url(smile.png) ; } H1 { color: red ; background-color :blue ; } P { color: green ; }

• Смотреть пример

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URLа затем сразу,Без пробелов!!! в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png) , ну Вы поняли...

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

Кто не знает, чтобы сохранить изображение просто наведите на него указатель, клацните правой кнопкой и выберите "Сохранить рисунок".

↑ Наверх ↑

Свойство BACKGROUND-REPEAT

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

Background-repeat: repeat-x;	повторение по горизонтали	Смотри пример
Background-repeat: repeat-y ;	повторение по вертикали	Смотри пример
Background-repeat: repeat ;	по вертикали и по горизонтали(значение по-умолчанию)	Смотри пример
Background-repeat: no-repeat ;	не повторяется	Смотри пример

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

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

BODY { background-image : url(smile.png) ; background-repeat: repeat-x; }

• Смотреть пример

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

↑ Наверх ↑

Свойство 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 ; }

• Смотреть пример

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

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