Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона

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

Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением .css

Есть несколько способов установить то, что нам нужно.

1-й способ.

Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):



В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:

BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}

В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).

Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 - и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.

Итак, вот какие параметры мы задаём при помощи стилей:

- background-image: url(адрес картинки фона); - прописываем адрес нашей фоновой картинки 1280 на 1024 px.

- background-attachment: fixed; - задаём фону указание оставаться фиксированным, то есть, неподвижным.

- background-repeat: no-repeat; - задаём фону указание не размножаться.

- background-position: top; - задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.

Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:

BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}

Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).

2-й способ.

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



При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:

BODY {background-image: url(адрес картинки фона); background-attachment: fixed; }

Здесь мы задали только параметр: background-attachment: fixed; - то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке "не размножаться" - она должна у нас размножиться на весь экран.

Получится вот что: ПРИМЕР

3-й способ.

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

BODY { background:#e0ddd8 url(адрес картинки фона) no-repeat fixed left top }

- background:#e0ddd8 url(адрес фоновой картинки) - цвет под фоновой картинкой - бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).

- no-repeat - картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров - Робертом Дювалем).

- fixed - фон зафиксирован, то есть неподвижный.

- left top - выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта - слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете: <table align=left> , а в документе css картинку пропишете справа: right top).

ПРИМЕР

Урок окончен.

Наверх