Создаем фиксированный фон в Mobirise, который не прокручивается.

Многие продвинутые пользователи конструктора сайта Mobirise, заметили, что при настройке фоновых изображений в блоках, имеют только функцию Parallax (когда задний фон, прокручивается плавнее и медленнее, чем передний фон):

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

В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана.

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

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

Однако, есть еще вариант параллакс-эффекта, когда при прокрутке страницы, задний фон остается фиксированным, а передний фон движется «вверх-вниз». Это эффект фиксированного фона.

В конструкторе сайтов Mobirise, для фона мы можете выбрать только параллакс или прокрутку. А как сделать фиксированный фон в Mobirise, который не прокручивается на уровне css и только в одном блоке?

Стоит учесть, что параллакс-эффект или параллакс-скроллинг - НЕ работает на мобильных устройствах. В том числе, не будет работать и тот, что мы с вами сейчас разберем.

Данный эффект, реализован в теме UNICORE для Mobirise. В сети, можно найти бесплатную загрузку данной темы, хотя, это на самом деле платная тема. При этом, тема старая и имеет множество багов, на которые жаловались многие пользователи.

Как сделать фиксированный фон в Mobirise?

Пожалуйста! Перед редактированием сайта, создавайте ОБЯЗАТЕЛЬНО резервные копии своих проектов.

Нам для работы, понадобиться редактор кода. Если у вас бесплатная версия Mobirise, вы можете установить себе бесплатную версию редактора кода.

Если у вас платная версия Mobirise и есть редактор кода, пропустите данный пункт, перейдя к следующему шагу.

Для этого, скачайте бесплатный альтернативный редактор кода для Mobirise: https://witsec.nl

Более подробно о бесплатных расширениях/дополнениях/блоках для Mobirise, есть в заметке: «Бесплатные расширения для Mobirise. Миф или реальность?»

На сайте, выберите Code Editor:

В новом окне, выберите «Download»:

Теперь, установите бесплатный редактор кода и перейдите к выбору блока для редактирования. В примере, будет выбран блок Header с бесплатной темы Mobirise 5:

Выбрав блок, поверьте, отключен ли Parallax в блоке по умолчанию в настройках. Для этого, откройте настройки блока:

И проверьте, отключен (ползунок должен быть неактивен) Parallax в блоке или нет (по умолчанию, он зачастую отключен в блоках):

Теперь, откройте блок в редакторе кода:

Нас будет интересовать блок CSS стилей в редакторе кода:

Теперь, нужно добавить в CSS стили код:

& when (@bg-type= 'image') {
background-image: url(@bg-value);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

 У вас должно стать в редакторе кода так:

Таким образом, мы добавили CSS в оператор стиля: 

background-attachment: fixed;

Способ рабочий и реализуем посредством самого Mobirise, что не должно создать конфликты с основными стилями сайта в большинстве случаев. При этом, данный эффект, не работает на мобильных устройствах. 

Не забывайте чистить кэш браузера, после редактирования сайта и перед очередным просмотром изменений через браузер.

Успехов вам, в реализации полезных и красивых сайтов.

Если будут вопросы, поправки и дополнения – оставляйте комментарии.