1. Для начала нам понадобится файл: Распаковывем архив и вложенный файл копируем в корневую папку вашего сайта расположенного на сервере.
2. Открываете проект вашего сайта в WebBuilder и правой кнопкой мыши входим в меню Page HTML.
3. В открывшемся окне во вкладке между тэгом <head></head> вставляем код: <script type="text/javascript" src="./jquery.backstretch.js">
</script>
4. В другой вкладке перед заключительным тэгом </body> вставляем варианты кода:
а)<script>
$.backstretch("../assets/images/IMG.jpg");
</script>
такой вариант самый простой без fade эффекта.
б)<script>
$.backstretch([
"../assets/images/IMG.jpg"
], {
fade: 750
});
</script>
этот вариант делает fade эффект, то есть картинка пояляется плавно.
в)<script>
$.backstretch([
"../assets/images/IMG-001.jpg",
"../assets/images/IMG-002.jpg",
"../assets/images/IMG-003.jpg"
], {
fade: 750,
duration: 6000
});
</script>
этот вариант подобен смене слайдов с fade эффектом.
5. Теперь нужно на сервере, где лежит ваш сайт сначала создать папку с названием assets. Потом её открыть и там создать подпапку с названием images. В этой подпапке размещаем ваши файлы или файл фоновой картинки. Не забываем в кодах перед боди IMG сменить на название вашего файла.
6. Последний этап - публикуем файл вашего проекта на сервер. Всё, можете смотреть результат работы.
В писике хочу добавить, что нужно помнить всегда о загрузке сайта в браузерах, поэтому лучше .jpg делать маленького веса, желательно не больше 150кб. Как это сделать? Ищите инфу в инете. Мне удалось относительно качественно болшую фотографию сжать до 133кб. Путь в кодах к файлу изображения, а также числовое значение (fade: 750) опытный программист может конечно изменить. Я оставил так, как это было в оригинале описания для другой программы, с которой я работал много лет до того, как перешёл недавно на WebBuilder. Удачи!