Как зафиксировать фон в html

Фоновое изображение и неподвижный фиксированный CSS фон

В этом уроке мы продолжаем рассматривать свойства фона.

Пример того, как зафиксировать фоновое изображение в нужном месте:

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

background-attachment:fixed фиксирует фоновое изображение в заданной позиции.

background-position: задает точные координаты фона по горизонтали и по вертикали.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиция фона Как зафиксировать фон Фиксированный CSS margin

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Неподвижный фон в CSS? – Не вопрос!

HTML\CSS → Как зафиксировать фон при прокрутке

С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокрутке. Значение свойства:

scroll — фон прокручивается вместе с содержимым (по умолчанию).
fixed — фон не прокручивается, зафиксирован на одном месте.

body < background-image: url('texture.jpg'); background-repeat: no-repeat; background-attachment: fixed; >

background

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

background: [, ]*

= [background-attachment || background-image || background-position || background-repeat] | inherit

= [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

        
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

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

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

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

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

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

В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 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, вот эту конструкцию:

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

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

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

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

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

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

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

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

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

— left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете: