Инструкция
1
Воспользуйтесь имеющимся в CSS свойством background-attachment, чтобы указать должен ли быть фон страницы фиксированным или подвижным. Всего это свойство может иметь три значения - если вы не указываете никакого из них, то по умолчанию считается, что background-attachment имеет значение scroll. При таком значении фоновое изображение прокручивается вместе с контентом страницы. Значение inherit копирует поведение фона родительского элемента, а значение fixed делает фоновую картинку независимой от содержимого - оно оставаться неподвижным при прокрутке страницы. Его вам и следует использовать.
2
Подготовьте CSS-инстукции для использования в страницах, фон которых нужно зафиксировать. Если вы не будете помещать CSS-код во внешний файл описания стилей, то эти инструкции надо разместить между открывающим и закрывающим тегами style:<style type="text/css">
// здесь будут описания стилей
</style>Описание поведения фона страницы надо привязать к элементу BODY - в терминологии языка CSS он будет называться «селектором» и записываться будет так:BODY {
// здесь будут описания тела страницы
}Свойства, относящиеся к этому селектору надо разместить внутри фигурных скобок, разделяя их точкой с запятой:BODY {
background-attachment: fixed;
background-image: url(images/BG.gif);
}Первая строка фиксирует фоновое изображение, а вторая указывает адрес файла, содержащего фоновую картинку, относительно адреса страницы. Эти две строки можно записать и в одной сложной CSS-инструкции таким образом:background: url(images/BG.gif) fixed;
// здесь будут описания стилей
</style>Описание поведения фона страницы надо привязать к элементу BODY - в терминологии языка CSS он будет называться «селектором» и записываться будет так:BODY {
// здесь будут описания тела страницы
}Свойства, относящиеся к этому селектору надо разместить внутри фигурных скобок, разделяя их точкой с запятой:BODY {
background-attachment: fixed;
background-image: url(images/BG.gif);
}Первая строка фиксирует фоновое изображение, а вторая указывает адрес файла, содержащего фоновую картинку, относительно адреса страницы. Эти две строки можно записать и в одной сложной CSS-инструкции таким образом:background: url(images/BG.gif) fixed;
3
Вставьте весь код для фиксации фона в текст страницы. В законченном виде он может выглядеть, например, так:<style type="text/css">
BODY {background: url(images/BG.gif) fixed;}
</style>Разумеется, вам надо заменить адрес размещения и название файла фоновой картинки. Код лучше поместить перед тегом </HEAD>, хотя это и не обязательное условие.
BODY {background: url(images/BG.gif) fixed;}
</style>Разумеется, вам надо заменить адрес размещения и название файла фоновой картинки. Код лучше поместить перед тегом </HEAD>, хотя это и не обязательное условие.
Видео по теме