Как закрепить фон?

В веб-строительстве применяют разные модели поведения фона при прокрутке страниц. Некоторые из них можно реализовать средствами только языка HTML, для других его возможностей недостаточно. Чтобы сделать фоновое изображение веб-страницы неподвижным следует использовать средства языка описания стилей CSS (Cascading Style Sheets - «каскадные таблицы стилей»).

Инструкция

Используйте свойство background-attachment чтобы задать характер поведения фона при прокрутке страницы. Это свойство присутствует во всех версиях языка CSS, начиная с первой, и такой способ фиксации поддерживается всеми браузерами в отличие от других вариантов. Для background-attachment предусмотрены всего три значения scroll, fixed и inherit. Значение scroll используется по умолчанию и означает, что фоновое изображение будет «прикреплено» к содержимому и при прокрутке содержимого будет прокручиваться вместе с ним. Значение fixed указывает браузеру, что фоновое изображение должно быть независимо от содержимого и при прокрутке оставаться неподвижным. А значение inherit означает, что фон этого элемента должен вести себя так же, как и фон родительского элемента. Вам нужно использовать свойство background-attachment со значением fixed.

Составьте код с соответствующими CSS-инструкциями для вставки в HTML-код страницы. Первая строка должна сообщать браузеру, что дальше следует блок описания стилей на языке CSS:

...

Между этими двумя тегами будут помещены описания стиля. В них надо указать к какому именно элементу страницы будут относиться инструкции. Фон относится к телу страницы (BODY):BODY {}Здесь BODY - это селектор, а внутрь фигурных скобок нужно поместить свойства и их значения, перечисленные через точку с запятой:background-image: url(img/fon.gif);

background-attachment: fixed;В первой строке свойство background-image указывает, что в качестве фонового изображения надо использовать файл fon.gif из папки img. Во второй строке содержится установка не прокручивать фон вместе с содержимым страницы. Синтаксис языка CSS позволяет заменить две строки на одну:background: url(fon.gif) fixed;

Запишите весь блок описания стилей в сборе:

BODY {background: url(img/fon.gif) fixed;}

Вставить его следует в заголовочную часть HTML-кода страницы, то есть между тегами и . Не забудьте заменить адрес и имя фоновой картинки img/fon.gif.

Оцените статью!