PHPackages                             c24o/wp-responsive-background-image - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. c24o/wp-responsive-background-image

ActiveLibrary

c24o/wp-responsive-background-image
===================================

PHP library/class to create dynamic styles for background images in WordPress.

11PHP

Since Oct 5Pushed 5y ago1 watchersCompare

[ Source](https://github.com/c24o/wp-responsive-background-image)[ Packagist](https://packagist.org/packages/c24o/wp-responsive-background-image)[ RSS](/packages/c24o-wp-responsive-background-image/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

wp-responsive-background-image
==============================

[](#wp-responsive-background-image)

Create CSS background-image rules dynamically for background images in WordPress to make them responsive.

Getting Started
===============

[](#getting-started)

WordPress uses the field featured image to link a representative image with an article. Sometimes this image is used in the header of the website when you visit the article. Using this library, you can easily use the featured images with the CSS rule *background-image* in a responsive way. The next solution can be used too if the image is not in the featured image field but in a custom field of the article or in another source.

Installation
============

[](#installation)

In your theme files or in your plugin files, you can use composer to install the library:

```
composer require c24o/wp-responsive-background-image

```

Usage
=====

[](#usage)

First you need to create an object with the configuration of the WordPress images sizes and the CSS breakpoints for each one:

```
ResponsiveBackground::create([
    '0' => ['header-image-xs', 0, 122],
    '576' => ['header-image-sm', 0, 150],
    '768' => ['header-image-md', 0, 200],
    '992' => ['header-image-lg', 0, 300],
    '1200' => ['header-image-xl', 0, 372],
]);

```

The library uses a mobile-first approach which means that `@media (min-width: ...)` is used. A breakpoint for an image means that the image should be used when the width of the viewport is at least as wide as the breakpoint.

The values in the configuration array are the parameters used by the function [add\_image\_size](https://developer.wordpress.org/reference/functions/add_image_size/). If the image size is already registered, then use the name of the image size only:

```
ResponsiveBackground::create([
    '0' => 'header-image-xs',
    '576' => 'header-image-sm',
    '768' => 'header-image-md',
    '992' => 'header-image-lg',
    '1200' => 'header-image-xl',
]);

```

To print the CSS code with the responsive rules in the head of the page, then use the WordPress hook [wp](https://developer.wordpress.org/reference/hooks/wp/). This hook is executed before printing the head but after loading the global post:

```
add_action('wp', function() {
    // CSS selctor for the element with the background images
    $css_selector = '.site-content .header-image-container';

    // print the bg styles
    ResponsiveBackground::create()->addBgStyles($css_selector);
});

```

By default, the function [get\_the\_post\_thumbnail\_url](https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/) is used to get the images. A custom function can be used too:

```
function get_my_image($post_id, $size) {
    // return URL of the image
}

add_action('wp', function() {
    // CSS selctor for the element with the background images
    $css_selector = '.site-content .header-image-container';

    // print the bg styles
    ResponsiveBackground::create()->addBgStyles($css_selector, 'get_my_image');
});

```

The result
==========

[](#the-result)

The library adds in the section of the page CSS rules like:

```

.site-content .header-image-container {
    background-image: url("http://localhost:8080/wp-content/uploads/2020/08/welcome-header-image-e1598034101966-419x122.png");
}
@media (min-width: 576px) {
    .site-content .header-image-container {
        background-image: url("http://localhost:8080/wp-content/uploads/2020/08/welcome-header-image-e1598034101966-515x150.png");
    }
}
@media (min-width: 768px) {
    .site-content .header-image-container {
        background-image: url("http://localhost:8080/wp-content/uploads/2020/08/welcome-header-image-e1598034101966-686x200.png");
    }
}
@media (min-width: 992px) {
    .site-content .header-image-container {
        background-image: url("http://localhost:8080/wp-content/uploads/2020/08/welcome-header-image-e1598034101966-1029x300.png");
    }
}
@media (min-width: 1200px) {
    .site-content .header-image-container {
        background-image: url("http://localhost:8080/wp-content/uploads/2020/08/welcome-header-image-e1598034101966-1277x372.png");
    }
}

```

License
=======

[](#license)

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/6b7130d59cd8f63efe3e58d49d92d4ee516ebfc636c28c2198679e76219e2e3f?d=identicon)[c24o](/maintainers/c24o)

---

Top Contributors

[![c24o](https://avatars.githubusercontent.com/u/8173043?v=4)](https://github.com/c24o "c24o (4 commits)")

### Embed Badge

![Health badge](/badges/c24o-wp-responsive-background-image/health.svg)

```
[![Health](https://phpackages.com/badges/c24o-wp-responsive-background-image/health.svg)](https://phpackages.com/packages/c24o-wp-responsive-background-image)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)