Появилась необходимость создать фиксированный background для ряда в WPBakery, содержащий картинку. Но, как оказалось это не так уж и просто. Точнее такой настройки для ряда нет, а добавление стиля background-size: cover; проблему не решает.
Вот что нужно сделать чтобы зафиксировать фоновое изображение:
1. Добавляем свой класс со следующими свойствами:
.about_us {
background-size: cover;
background-attachment: fixed;
}
2. В основных настройках ряда обязательно указываем три параметра: Ряд на всю высоту, Положение колонок по центру, Положение контента по центру и указываем свой класс:
3. В настройках дизайна выбираем фоновое изображение и указываем No repeat
В принципе на этом можно остановиться, но обычно для фоновых изображений требуется добавить overlay, чтобы например белый текст контрастировал с затемненным фоном. В платной версии WPBakery в настройках ряда есть специальная вкладка для настроек перекрывающего слоя. Но, как решить такую задачу для бесплатной версии Page Builder?
4) Добавляем оверлей для фонового изображения ряда. Для этого добавляем в ряд элемент Вставка HTML и в нём размещаем простой скрипт. Скрипт добавляет к тегу div с нашим выше описанным классом about_us добавляет дочерний div с классом about_us_overley. В принципе скрипт можно разместить и в футере темы, но желательно чтобы он по условию применялся к той странице, на которой размещается блок с фоном и оверлеем.
<script>jQuery('div.about_us').prepend('<div class="about_us_overlay"></div>');</script>
в файл style.css темы добавляем следующий код:
.about_us_overlay {
background-color: #000000;
opacity: 0.4;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
Задача по добавлению фиксированного фонового изображения с оверлеем решена!