Как создать адаптивное фоновые изображения в WordPress с разными разрешениями экрана

Автор: Екатерина Громова | Опубликовано: 23.12.2025

Адаптивные фоновые изображения — важный элемент современного веб-дизайна, особенно для сайтов на WordPress. Они позволяют подгружать разные версии изображений в зависимости от размера экрана, что улучшает производительность и пользовательский опыт. В этой статье разберём, как реализовать адаптивный фон в WordPress с помощью CSS, PHP и JavaScript, а также рассмотрим примеры плагинов и кастомного кода для решения этой задачи.

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

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

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

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

Как реализовать адаптивный фон средствами CSS и WordPress

Самый простой способ — использовать медиа-запросы CSS, чтобы менять фон в зависимости от ширины экрана. Например:

body {
  background-image: url('https://example.com/images/bg-large.jpg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  body {
    background-image: url('https://example.com/images/bg-medium.jpg');
  }
}

@media (max-width: 480px) {
  body {
    background-image: url('https://example.com/images/bg-small.jpg');
  }
}

Однако этот способ не всегда оптимален, если изображения тяжелые, так как браузер может загрузить все варианты. Более умный подход — использовать тег <picture> или srcset, но они работают только с <img>, а не с CSS-фонами.

Вариант с HTML и CSS для фонового изображения

Можно создать отдельный <div> с фоновым изображением и менять его через тег <picture> и <source> с разными медиа-запросами:

<picture>
  <source media="(max-width: 480px)" srcset="bg-small.jpg">
  <source media="(max-width: 768px)" srcset="bg-medium.jpg">
  <img src="bg-large.jpg" alt="Background" style="display:none;">
</picture>
<div class="background"></div>

Далее с помощью JavaScript можно динамически устанавливать фон div.background на основе загруженного изображения. Но это усложняет верстку.

Динамическая замена фонового изображения через PHP в WordPress

В WordPress можно настроить динамический вывод фонового изображения в зависимости от устройства пользователя с помощью PHP и функции wp_is_mobile(). Пример функции, которая выводит нужный URL для фонового изображения:

function wptemplates_get_adaptive_bg_url() {
  if ( wp_is_mobile() ) {
    return get_template_directory_uri() . '/images/bg-small.jpg';
  } else {
    return get_template_directory_uri() . '/images/bg-large.jpg';
  }
}

В шаблоне можно подключить стиль инлайн или через отдельный файл:

<style>
body {
  background-image: url('<?php echo esc_url( wptemplates_get_adaptive_bg_url() ); ?>');
  background-size: cover;
  background-position: center;
}
</style>

Этот подход прост, но учитывает только мобильные/десктопные устройства, без промежуточных размеров.

Использование плагинов для управления адаптивными фоновыми изображениями

Если хочется готовое решение, можно обратить внимание на плагины:

Simple Full Screen Background Image — позволяет задать несколько изображений для разных экранов с удобным интерфейсом.
WP Backgrounds Lite — настраивает фоновые изображения с поддержкой адаптивности и эффектов.
Clearfy Pro — расширенный плагин оптимизации, который включает опции по оптимизации загрузки фоновых изображений.

Для сайтов с темами Reboot или Root из WPShop.ru можно использовать встроенные возможности кастомизации в настройках темы, где часто уже предусмотрена адаптивная работа с фоновыми изображениями.

Пример подключения фонового изображения в теме Reboot

В файле functions.php темы можно добавить функцию для подключения кастомного фона с адаптивностью:

function wptemplates_reboot_custom_background() {
  add_theme_support( 'custom-background', [
    'default-image' => get_template_directory_uri() . '/images/bg-large.jpg',
    'wp-head-callback' => 'wptemplates_reboot_background_callback'
  ]);
}
add_action( 'after_setup_theme', 'wptemplates_reboot_custom_background' );

function wptemplates_reboot_background_callback() {
  $bg_url = wptemplates_get_adaptive_bg_url();
  echo "<style> body { background-image: url('" . esc_url( $bg_url ) . "'); background-size: cover; background-position: center; } </style>";
}

Оптимизация изображений для адаптивных фонов

Чтобы фоновые изображения быстро загружались, их нужно оптимизировать:

Используйте форматы WebP или AVIF — они дают лучшее сжатие при хорошем качестве.
Создавайте несколько версий изображений с разными разрешениями, например: 1920px, 1280px, 768px, 480px.
Используйте инструменты типа Clearfy Pro для автоматической оптимизации и ленивой загрузки изображений.

Пример кода для ленивой загрузки фонового изображения с JavaScript

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

document.addEventListener('DOMContentLoaded', function() {
  var bgDiv = document.querySelector('.background');
  if (!bgDiv) return;

  function wptemplates_lazyLoadBg() {
    if (window.scrollY >= 100) { // пример условия
      bgDiv.style.backgroundImage = "url('" + wptemplates_get_adaptive_bg_url_js() + "')";
      window.removeEventListener('scroll', wptemplates_lazyLoadBg);
    }
  }

  function wptemplates_get_adaptive_bg_url_js() {
    var width = window.innerWidth;
    if (width <= 480) return '/wp-content/themes/yourtheme/images/bg-small.jpg';
    if (width <= 768) return '/wp-content/themes/yourtheme/images/bg-medium.jpg';
    return '/wp-content/themes/yourtheme/images/bg-large.jpg';
  }

  window.addEventListener('scroll', wptemplates_lazyLoadBg);
});

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

Выводы по созданию адаптивных фонов в WordPress

Резюмируя, для эффективной работы с адаптивными фоновых изображениями в WordPress рекомендуются следующие шаги:

Создайте несколько версий фонового изображения с разными разрешениями.
Используйте комбинацию CSS медиа-запросов и PHP-функций wp_is_mobile() для базовой адаптивности.
Подключайте фон через inline-стили из PHP для динамического определения нужного изображения.
Оптимизируйте изображения через плагины, например Clearfy Pro.
При необходимости реализуйте ленивую загрузку фоновых изображений с помощью JavaScript.

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