Drupal is a registered trademark of Dries Buytaert
drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). editoria11y 2.2.22 — Minor update available for module editoria11y (2.2.22). ai 1.2.13 — Minor update available for module ai (1.2.13). ai 1.3.2 — Minor update available for module ai (1.3.2). moderated_content_bulk_publish 2.0.51 — Minor update available for module moderated_content_bulk_publish (2.0.51). moderated_content_bulk_publish 2.0.50 — Minor update available for module moderated_content_bulk_publish (2.0.50). editoria11y 2.2.21 — Minor update available for module editoria11y (2.2.21). eca 3.1.0 — Minor update available for module eca (3.1.0). sophron 3.1.1 — Minor update available for module sophron (3.1.1). ai 1.3.1 — Minor update available for module ai (1.3.1). seven 2.0.0-beta6 — New beta version released for theme seven (2.0.0-beta6). seven 1.0.1-beta1 — First beta version released for theme seven (1.0.1-beta1). ui_patterns 8.x-1.15 — Minor update available for module ui_patterns (8.x-1.15). layout_paragraphs 3.0.0-beta1 — First beta version released for module layout_paragraphs (3.0.0-beta1). raven 7.3.8 — Minor update available for module raven (7.3.8). bamboo_twig 6.0.7 — Minor update available for module bamboo_twig (6.0.7).
← All modules

responsive_background_image

Security covered
View on drupal.org

This is a very simple module that provides a method to call programmatically from within a preprocess function, that will generate CSS media queries for a responsive background image for a specific CSS selector. This will allow you to display an image from an image field, on a particular HTML tag/element as a background image, and serve a specific image file depending on the browser window width, or the device pixel ratio. It uses Drupal core Responsive Image Styles to generate the media queries and image paths. It supports the classic Image field and the newer Media field of type Image.

The method provided by this module will return an array ready to be attached to the HTML <head> as a <style> tag. Please note there is no UI for this module. It simply provides a method that can be called programmatically from within a preprocess function.

This module was created specifically for use in Paragraphs with image fields. For example, a Paragraph Type of "Hero", in which there is an image field, and where the image should be displayed as a background image on some part of the rendered Paragraph. It's possible that it would actually work for any fieldable entity (such as a Custom Block or a Node) though this hasn't been tested.

See Documentation for a step by step description of how to use this module.

Versions

  • 2.x is the recommended Drupal >=9.3 semver release. Further development will happen here.
  • 8.x-1.x is the old Drupal 8 compatible version which will be deprecated sooner or later.

Activity

Total releases
1
First release
Apr 2026
Latest release
11 hours ago
Release cadence
—
Stability
0% stable

Releases

Version Type Release date
2.0.0-beta4 Pre-release Apr 9, 2026