proview.ru → Конструирование сайтов → CSS → Размещение фона на странице

Размещение фона на странице

Задача стоит следующая. Необходимо разместить фоновую картинку в одном из углов веб-страницы или ее таблицы при помощи стилей. Чтобы поместить рисунок в виде фона на веб-странице надо прописать следующий код.

Пример 1. Фон на странице

html
style type="text/css"
!--
body { background-attachment: fixed; background-image: url(mybg.gif); background-repeat: no-repeat; background-position: right bottom }
--
/style

body
Содержимое страницы
/body
/html

Имя рисунка и путь к нему пишется внутри параметра url (например, url(mybg.gif)), а положение фона определяется параметром background-position. У него два значения, положение по горизонтали (может быть - right, left, center) и вертикали (может быть - top, bottom, center). В примере 1 фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top.

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

Пример 2. Фон в таблице

html
body

table
trtd style="background-attachment: fixed; background-image: url(mybg.gif); background-repeat: no-repeat; background-position: left top"

Содержимое таблицы

/td/tr
/table
/body
/html

Тут может возникнуть проблема, связанная с разной интерпретацией CSS браузерами Netscape и Internet Explorer. У последнего работает все корректно, а вот Netscape помещает фон не в угол ячейки, как было бы правильно, а в угол страницы. Поэтому в разных браузерах пример 2 будет работать и показываться по разному. Как добиться однообразия пока не знаю, будут идеи - пишите, обсудим.

Влад Мержевич

Источник: http://sitestroy.ru

Популярное