Неподвижный фон на CSS

Неподвижный фон, прописанный с помощью стилей 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).

Fixed background, prescribed with styles CSS. Breeding and breeding background image

When installing a fixed background image under the table that we will settle the text and other useful information, creates the following effect: when you scroll through the table with the text background under it remains stationary and does not move with the table. Like here: here

A similar effect can create some illusion of a two-layer, some of the space on your pages.

Typically, the effect of the fixed background image sought by a statement in the CSS stylesheet of the following attributes: background-attachment: fixed; We are talking about the style sheet CSS, which you are in a separate document with the extension .css

There are several ways to fix what we need.

Method 1.

Select the image that will have the background. In this case, I take this picture here (click on a thumbnail to see the full size):

The document styles css, where Asking parameters for BODY, insert the following syntax:

BODY {background-image: url (address background image); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}

In this case, we take as the background image large image in full screen (for example, 1280 by 1024 px).

Note: If you do not have the document styles css, then you need to create it, as described in Lesson 8 — and prescribe a reference to the document styles css code in your html-pages, as described in the same class.

So here’s what parameters we ask using styles:

— Background-image: url (address background image); — Prescribes against our background image of 1280 by 1024 px.

— Background-attachment: fixed; — Asking background instructed to remain fixed, ie stationary.

— Background-repeat: no-repeat; — Asking background instructed not to reproduce.

— Background-position: top; — Asking the position of the background image: set the top of the page.

So we inserted into the document styles css, in the BODY, this design here:

BODY {background-image: url (address background image); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}

I created a simple table for 70% of the screen and put it in the text and two pictures for clarity. That’s what we have on the page: Example (to see the effect of the fixed background, roll up and down the page).

2nd method.

Let’s try to put a small picture, which will automatically repeat and fill the entire space of the page, forming a background pattern. Here is a picture:

At the same time we capture the entire background, prescribing to the stylesheet css just such a structure:

BODY {background-image: url (address background image); background-attachment: fixed; }

We asked only option: background-attachment: fixed; — That is, the registered designation browser to make the background image fixed. As we said the picture «not to breed» — it should we multiply the entire screen.

Get this: Example

3rd method.

Let’s try to set the background image on the one hand, and a table with text and images on a page located on opposite sides, so that it does not block a background image. To prescribe this document css as follows:

BODY {background: # e0ddd8 url (address background images) no-repeat fixed left top}

— Background: # e0ddd8 url (address background image) — the color of a background image — beige, the color of the background of the picture. This is to ensure that the transition was not visible in the background of our images (picture takes only a part of the screen).

— No-repeat — the picture does not reproduce (there is one large picture with one of my favorite American actors — Robert Duvall).

— Fixed — fixed background, that is immovable.

— Left top — aligned to the upper left edge of the screen (you can put the picture on the right, and the table of the site — to the left, as you wish. For this purpose, the document html to the table you prescribe: <table align = left>, and document css image prescribe the right : right top).