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

Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей 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, то вам необходимо создать его, как указано в - и прописать ссылку на документ стилей 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 в таблице вы пропишете:

Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:

Body{ background: url("../images/bg.jpg") no-repeat center center / cover fixed; }

И довольный нажал F5. Красота, да и только!

Начал скроллить страничку вниз и чувствую, что-то не то…

Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

Я начал свое расследование…

Сначала я погрешил на свойство cover , но дело оказалось не в нем. Отключив фиксированное положение фона (убрав fixed), мой «Crysis» выдал мне больше 30 FPS ! «Во дела...», подумал я. Как же так? Почему? Почему я не замечал этого раньше? Возможно, это не очень заметно на легковесных сайтах, где не так много html элементов.

А дело оказалось вот в чем. Использование background-attachment: fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов.

Чтобы решить эту проблему, нашему фоновому изображению нужен свой элемент, чтобы оно могло двигаться независимо от других. А также нам понадобится CSS3-свойство will-change . О нем речь пойдет ниже.

Как только мы решим проблему с прорисовкой, скроллинг уже не будет проходить у нас рывками. Так как фон будет лежать на своем собственном слое, больше не потребуется перерисовывать страницу каждый раз при прокрутке.

Давайте я покажу все на примере.

Это наш изначальный код (я развернул свойства для наглядности):

Body{ background: url("../images/bg.jpg") no-repeat center center; background-attachment: fixed; background-size: cover; }

А вот, что нам необходимо сделать для решения проблемы:

Body{ position: relative; } body::before { background: url("../images/bg.jpg") no-repeat center center; background-size: cover; content: " "; height: 100%; left: 0; position: fixed; top: 0; width: 100%; will-change: transform; z-index: -1; }

Мы добавили position: relative для элемента body , чтобы затем спозиционировать псевдо-элемент, который будет отдельным слоем для нашего фона. Остальные свойства, касательно фона, мы перенесли в::before . У псевдо-элемента мы теперь используем position: fixed , вместо прежнего background-attachment: fixed у body . Ну и самое важное, без чего вся затея потерпит крах, - это свойство will-change .

Свойство will-change предписывает браузеру отображать элемент, независимо от окружающих его других элементов. Оно как бы говорит браузеру: «Эй, друг, этот элемент изменится когда-нибудь потом, в будущем, так что прорисуй его только один раз на его собственном слое. И не нужно учитывать остальные элементы - он сам по себе».

Такие вот дела.

Данный билд я протестировал в разных браузерах, и вот небольшое резюме:

1. Google Chrome. Все ОК, работает как часы.
2. Mozilla Firefox. Все ОК, работает как часы.
3. Opera. Все ОК, работает как часы.
4. Safari. Все ОК, работает как часы. За проверку спасибо smssystem
5. Microsoft Edge. Метод работает, но есть один косяк. Если крутить колесиком, то дергается верх и низ страницы, но потом приходят в норму. Если же крутить с помощью скроллбара, то все ОК.
6. Internet Explorer. Та же проблема, что и у Edge.

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

Картинка в качестве фона страницы - HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body :

Здесь фоновое изображение устанавливается с помощью атрибута background тега body.

Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте. Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.

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

Картинка в качестве фона страницы - CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background :

Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо "сшиваться" по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов "Нубекс" для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В CSS есть такое свойство background-attachment: fixed , которое позволяет зафиксировать фоновое изображение. То есть при прокрутке страницы оно не будет прокручиваться со страницей. Но в CSS нет свойства, которое позволило бы сделать смену изображений при прокрутке, поэтому мы воспользуемся Javascript.

Фиксированный фон для сайта

Возможно вы не поняли о чем я пишу, поэтому посмотрите демо и вы сами увидите этот красивый эффект:

Скачать

Как же сделать меняющийся фон для сайта?

HTML

Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:

В теге