Центрировать фоновое изображение, которое представляет собой вставку HTML — Пользовательский код — Forum
Anastasiia_G (Анастасия Грианченко)
#1
Привет, ребята,
Я делаю целевую страницу с разделом героя с эффектом водной ряби, используя клонируемый проект https://webflow.com/website/js-ripple-effect?s=js-ripple-effect, и я была проблема с центрированием фонового изображения.
https://water-ripple-effect-0e0d58.webflow.io/ В мобильной версии вы можете видеть только левую часть используемого изображения, и мне нужно отцентрировать ее. Я плохо разбираюсь в коде (о, если бы я этого не делал), поэтому я прошу любой помощи с этим пользовательским кодом.
Ссылка на мой проект здесь: https://preview.
webflow.com/preview/water-ripple-effect-0e0d58?utm_medium=preview_link&utm_source=designer&utm_content=water-ripple-effect-0e0d58&preview=180b8087ce3fe8b25289c65385e3f0de&mode=preview0005
Буду признателен за любую помощь или информацию. Спасибо!
КрисТ
#2
Привет Анастасия,
позиционирование вашего фонового изображения должно быть установлено по-другому.
Попробуйте эту вставку:
Изменено с «слева вверху» на «в центре вверху».
1 Нравится
Анастасия_Г (Анастасия Грианченко)
#3
Крис, большое спасибо!!! Он работает идеально!
О, если бы вы могли представить мое облегчение сейчас СПАСИБО!
КрисТ
#4
Ха-ха, добро пожаловать!
Кстати, неплохой эффект, хотелось бы увидеть конечный сайт, если вы не против поделиться им.
1 Нравится
st_lola (святая лола)
#5
Спасибо @ChrisT !!!
Работает действительно отлично!!!
Работа с фоновыми изображениями | Справочный центр – Foleon
Используйте фоновые изображения для заполнения блоков и столбцов.
Вы можете использовать фоновых изображения для покрытия фона блока или столбца. Это позволяет размещать элементы поверх этих изображений. В этой статье мы покажем вам, как установить фоновое изображение.
💡 Хотите узнать больше об элементе изображения? Ознакомьтесь с нашей статьей Работа с элементом изображения .
В этой статье
Фоновое изображение против элемента изображения
Как установить фоновое изображение
Установка фона для таблета или мобильного
Идеальное изображение.
Фоновое изображение и элемент изображения
Фоновые изображения используются для заполнения фона блока или столбца.
В приведенном ниже примере вы можете видеть, что 9Фон блока 0074 закрыт изображением, а текст «Удивительное название» наложен сверху.Имейте в виду, что есть 2 способа использования изображений в Foleon Doc:
В качестве элемента изображения : в разделе элементов в левой части редактора , вы можете чтобы внедрить элемент изображения в столбец. Подробнее об элементе изображения читайте в нашей статье Работа с элементом Изображение.
Как установить фоновое изображение
Как упоминалось выше, вы можете установить фоновое изображение как для блока, так и для столбца. Мы рассмотрим, как это сделать ниже.
Фоновое изображение блока
На фиолетовой панели настроек блока щелкните значок Изменить фон . В приведенном ниже примере заполнитель виден, поскольку фоновое изображение не установлено. Если установлено фоновое изображение, будет видна небольшая миниатюра изображения.
Затем вы попадете в Настройки фона блока. С типом фона , установленным на Image , вы можете вставить изображение, чтобы покрыть фон вашего блока. Наведите курсор на область изображения и нажмите на нее, чтобы Добавить изображение .
💡 Вы также можете получить доступ к настройкам фона, нажав на значок настроек блока (зубчатое колесо).
Появится всплывающий экран с медиатекой. Выберите свое изображение и нажмите на Выберите носитель. Теперь вы внедрили фоновое изображение для своего блока. На фиолетовой панели настроек блока вы увидите маленькую миниатюру фонового изображения.
Фоновое изображение столбца
Настройка фонового изображения столбца аналогична рабочему процессу для фонового изображения блока.
В оранжевой панели настроек столбца щелкните значок Изменить фон . В приведенном ниже примере заполнитель виден, поскольку фоновое изображение не установлено.
Если установлено фоновое изображение, будет видна небольшая миниатюра изображения.Затем вы попадете в Фоновые настройки столбца. С типом фона , установленным на Image , вы можете вставить изображение, чтобы покрыть фон вашего столбца. Наведите курсор на область изображения и нажмите на нее, чтобы Добавить изображение .
💡 Вы также можете получить доступ к настройкам фона, нажав на значок настроек столбца (зубчатое колесо).
Появится всплывающий экран с медиатекой. Выберите свое изображение и нажмите на Выберите носитель. Теперь вы реализовали фоновое изображение для своего столбца. В приведенном ниже примере фоновое изображение столбца накладывается поверх фонового изображения.
На фиолетовой панели настроек блока вы увидите маленькую миниатюру фонового изображения.
Установка фонового изображения для планшета или мобильного телефона
Можно установить отдельное фоновое изображение блока для планшетного и мобильного режимов просмотра.
⚠️ Невозможно установить отдельное фоновое изображение столбца для планшета и мобильного телефона. Он унаследует фоновое изображение режима просмотра рабочего стола, но заменить его нельзя. Это означает, что вам, возможно, придется скрыть столбец в этих режимах просмотра.
По умолчанию фоновые изображения в режиме просмотра планшета и мобильного устройства наследуют изображение из режима просмотра рабочего стола. Однако вы можете заменить его изображениями более подходящего размера. Важно знать, как ваши изменения влияют на ваш контент в каждом режиме просмотра.
Планшет — Замена фонового изображения установит это новое изображение как для планшета, так и для мобильного телефона. Идеальные размеры фонового изображения для планшета — 768 x 1024 пикселей.
Мобильный — Замена фонового изображения установит это новое изображение только для мобильного режима просмотра. Идеальные размеры фонового изображения для мобильных устройств — 523 x 934 пикселей.
