Responsive Background Image

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.