Background image cover: CSS background-size property

Как остановить обрезку фонового изображения на мобильных устройствах

1 Комментарий / К Джейми Марсленд / 8 мая 2023 г.

Введение

Блоки WordPress Gutenberg сделали разработку красивых и функциональных веб-страниц проще, чем когда-либо. Один популярный блок, блок «Обложка», позволяет пользователям добавлять привлекательные полноразмерные изображения и видео в качестве фона с наложенным текстом. В этой статье мы рассмотрим CSS 9.0007 background-size: настройка обложки , ее происхождение и способы предотвращения обрезки фоновых изображений на мобильных устройствах.

Происхождение

background-size: cover

Параметр background-size: cover был введен в спецификацию CSS3, которая была официально опубликована в качестве рекомендации W3C 19 июня 2012 г. Это новое свойство позволило разработчикам легко управлять масштабированием фоновых изображений, чтобы они соответствовали различным размерам контейнеров и разрешениям экрана.

Основной целью этого параметра было создание более визуально привлекательного и динамичного взаимодействия с пользователем. С background-size: cover фоновые изображения автоматически масштабируются и изменяют размер, чтобы заполнить весь контейнер, сохраняя при этом соотношение сторон, гарантируя, что на фоне не останется пробелов.

Общие сведения об обрезке изображения на мобильных устройствах

Если для фонового изображения установлено значение cover , на мобильных устройствах оно может отображаться обрезанным. Это связано с тем, что изображение масштабируется для заполнения всего контейнера с сохранением соотношения сторон. В результате изображение часто больше контейнера, и любая часть изображения, выходящая за пределы контейнера, не видна. Это особенно распространено на мобильных устройствах, где размеры экрана меньше и с большей вероятностью могут привести к кадрированию.

Предотвращение обрезки изображений на мобильных устройствах

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

Используется свойство padding-top для сохранения соотношения сторон фонового изображения.

1. Добавьте пользовательский класс CSS в блок обложки Gutenberg, например, «custom-cover-image», как упоминалось в предыдущих ответах.
2. Затем добавьте на свой сайт следующий пользовательский CSS:

 .custom-cover-image {
    /* Удалить высоту по умолчанию, установленную блоком покрытия Гутенберга */
    минимальная высота: 0 !важно;
    высота: авто;
}
/* Сохраняем соотношение сторон фонового изображения */
.custom-cover-image::before {
    содержание: "";
    дисплей: блок;
    обивка верха: 56,25%; /* Настройте это значение в зависимости от соотношения сторон вашего изображения (например, 16:9 ->  56,25%) */
}
/* Мобильные устройства (портрет и альбом) */
Только экран @media и (максимальная ширина: 767 пикселей) {
    .custom-cover-image img.wp-block-cover__image-background {
        объект-подгонка: обложка !важно;
        положение объекта: по центру !важно;
        ширина: 100% !важно;
        высота: 100% !важно;
        положение: абсолютное;
    }
    . custom-cover-image .wp-block-cover__inner-container {
        /* Выравнивание содержимого по центру */
        выравнивание текста: по центру;
        /* Поместите внутренний контейнер поверх фонового изображения */
        положение: абсолютное;
        сверху: 0;
        слева: 0;
        ширина: 100%;
        высота: 100%;
        дисплей: гибкий;
        выравнивание элементов: по центру;
        выравнивание содержимого: по центру;
    }
}
 

Этот фрагмент кода CSS использует псевдоэлемент ::before с padding-top для сохранения соотношения сторон фонового изображения. Отрегулируйте значение padding-top в зависимости от соотношения сторон вашего изображения. Медиа-запрос гарантирует, что эти стили применяются только на небольших экранах (мобильных устройствах).

Обратите внимание, что этот обходной путь может работать не во всех случаях, поскольку он основан на фиксированном значении соотношения сторон. Если у вас есть несколько блоков обложки с разными соотношениями сторон фонового изображения, вам потребуется создать пользовательские классы CSS с разными padding-top значений для каждого соотношения сторон.

Заключение

Блок WordPress Gutenberg Cover в сочетании с настройкой CSS background-size: cover позволяет разработчикам создавать визуально привлекательные и динамичные веб-страницы.

Однако важно учитывать возможности кадрирования изображений на мобильных устройствах.

Используя медиа-запросы CSS и настраивая свойства background-size и background-position , вы можете предотвратить обрезку изображения на мобильных устройствах и обеспечить согласованное взаимодействие с пользователем на экранах разных размеров.

фоновых изображений в Elementor | WPDesigns

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

Одна вещь, которая может помочь улучшить общий вид вашего веб-сайта, — это добавить фон к различным разделам, столбцам или страницам. Я расскажу, как добавить фон в каждый из различных разделов сайта при использовании Elementor.

Фоновое изображение в Elementor

Содержание

Скачать Elementor Pro

Как добавить фоновые изображения в Elementor для всего веб-сайта

Чтобы добавить фон для всего веб-сайта, следуйте этим инструкциям:

Открыть страницу в « Редактировать с помощью Elementor »

 Нажмите значок Burger на верхней левой панели.

Перейдите к Настройки сайта

Фон

Затем установите выбранный фон с помощью библиотеки мультимедиа.

Настройте фон по своему усмотрению, используя настройки положения, прикрепления, повторения и размера.

Кнопка-переключатель Вариант настройки сайта Вариант фона в настройках сайта в Elementor Добавление фонового изображения для всего сайта

Как добавить фоновые изображения в Elementor для отдельной страницы

Находясь на странице, откройте настройки страницы, щелкнув значки «Настройки» в левом нижнем углу экрана рядом с зеленой кнопкой «Опубликовать/Обновить». Вы начнете с вкладки Settings  , но вам нужно будет изменить ее на вкладку Style  .

На вкладке Стиль вы можете выбрать тип фона, который хотите добавить на страницу. Это может быть цвет, градиент или изображение.

Если вы выберете изображение, вы сможете настроить положение фона, вложение, повторение и размер, чтобы оно выглядело так, как вы хотите.

После завершения обязательно нажмите «Сохранить черновик», «Опубликовать» или «Обновить».

Добавьте изображения для фона страницы Вкладки разделов Варианты фона Как добавить фоновое изображение в раздел

Как добавить фоновое изображение в раздел или столбец

В этой части я расскажу и объясню, как добавить фон в раздел на вашем сайте WordPress.

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

После того, как вы нашли и получили доступ к разделу, вы можете щелкнуть вкладку «Стиль», чтобы вызвать параметры фона, которые позволят вам добавить цвет фона, градиент или изображение. Если вы выберете изображение, вы сможете настроить положение фона, вложение, повторение и размер, чтобы оно выглядело так, как вы хотите.

Установите правильное положение фонового изображения

Положение изображения можно установить таким образом, чтобы изображение фокусировалось на одном из 9 мест:

Верхний левый, верхний центральный, верхний правый, центральный левый, центр справа, нижний правый, центральный центр и нижний правый.

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

Параметры позиционирования фонового изображения Параметры вложения фона в Elementor

Вложение

Здесь вы можете настроить вложение фона. По умолчанию он всегда находится в режиме прокрутки. Для фонового прикрепления у вас будет два варианта. Фиксированная и прокрутка. Если вы выберете прокрутку, изображение будет перемещаться вместе с содержимым, пока пользователь прокручивает страницу вниз или вверх. Однако, если вы выберете фиксированное, фоновое изображение будет фиксированным. В результате, когда пользователь прокручивает вниз или вверх, изображение остается на месте, пока текст прокручивается по нему.

Repeat

Если фоновое изображение не полностью покрывает элемент, background-repeat указывает, должно ли и каким образом изображение реплицироваться внутри элемента. No-repeat, Repeat, Repeat-x и Repeat-y — это четыре варианта фонового повтора в Elementor. По умолчанию он настроен на повтор. Когда вы выбираете «Без повтора», фоновое изображение больше не может повторяться.

Изображение будет повторяться по горизонтали и вертикали, если вы решите повторить. Когда вы выбираете Repeat-x, изображение будет повторяться по горизонтали. Когда вы выбираете Repeat-y, изображение будет повторяться по вертикали.

Параметры повтора фона в Elementor Параметры размера фонового изображения

Установка размера фона веб-сайта

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

Этот подход рекомендуется, чтобы изображение оставалось четко видимым и не обрывалось на больших дисплеях сбоку. Обычное полноэкранное фоновое изображение имеет размер 1920 x 1080 пикселей.

При настройке размера фона у вас есть 3 основных варианта: Авто, Обложка и Содержать. Существует также пользовательская опция, с помощью которой вы можете перетаскивать и располагать изображение по своему усмотрению, но эта опция не всегда так хорошо работает для адаптивных экранов.

Каждый из размеров показывает фоновое изображение по-разному.

Автоматический размер изображения

По умолчанию для размера изображения установлено значение Авто.

Фоновое изображение будет отображаться в исходном размере, если выбран вариант Авторазмер.

В общем, Авто означает, что масштабирование не будет.

Если изображение имеет ширину 1200 пикселей, а ширина раздела составляет всего 1000 пикселей, изображение будет обрезано, чтобы поместиться на экране шириной всего 1000 пикселей (по умолчанию верхняя левая область).

Размер изображения обложки

Если вы выберете Обложку в качестве размера изображения, фоновое изображение будет масштабировано, чтобы соответствовать всей секции, иногда могут быть пробелы с другими настройками, но с Обложкой это будет… закрыто.

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

В большинстве случаев размер Cover является лучшим выбором при использовании Elementor. Авто может отображать увеличенную версию изображения, в то время как Контейнер обычно вмещает изображение, поэтому все изображение видно, но это часто оставляет пробелы вокруг, если только контейнер не имеет точно такого же размера.

Содержать размер изображения

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

Это может включать пустое пространство слева и справа или сверху и снизу. Вы можете выбрать повторение изображения, чтобы покрыть все, но это не всегда работает так хорошо, и может закончиться тем, что изображение будет выглядеть разрозненным и склеенным.

 

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

Сделайте фоновые изображения в Elementor Mobile адаптивными

Перейдя в Раздел > Макет, вы можете отрегулировать высоту фонового изображения.

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

Вы также можете использовать VH для высоты.
Сотые доли высоты окна просмотра определяются VH.

На простом английском языке это означает –

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

Каждый VH представляет 1% всего окна просмотра, что дает масштаб 100%.

Если вы установите значение VH на 100 процентов, изображение все равно будет занимать всю высоту экрана, независимо от разрешения экрана.

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

Если высота содержимого раздела превышает размер раздела, Elementor отобразит весь контент, а высота раздела будет увеличена.

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

Параметры высоты в разделе Как задать высоту раздела Добавление фонового видео

Как добавить видео в качестве фона

Вы можете добавить видео, изменив тип фона.

Добавьте новый раздел, затем вы получите возможность редактировать раздел. В макете сделайте ширину содержимого «полной шириной», а также установите высоту по своему усмотрению. Затем на вкладке стиля выберите видео из типа фона. Ниже вы найдете место, куда вы можете вставить ссылку на видео, такое как YouTube, Vimeo и т. Д., Которое вы хотите отображать на заднем плане определенного раздела. После этого у вас будет больше вариантов, например, возможность установить время начала и окончания видео. При желании вы также можете включить или выключить режим «Играть один раз», «Играть на мобильном устройстве» и режим конфиденциальности.