Drupal is a registered trademark of Dries Buytaert
drupal 11.3.7 Update released for Drupal core (11.3.7)! drupal 11.2.11 Update released for Drupal core (11.2.11)! drupal 10.6.7 Update released for Drupal core (10.6.7)! drupal 10.5.9 Update released for Drupal core (10.5.9)! cms 2.1.1 Update released for Drupal core (2.1.1)! 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). eca 3.1.1 Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 Minor update available for module ai (1.3.3). ai 1.2.14 Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 Minor update available for module klaro (3.0.10). klaro 3.0.9 Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 Minor update available for module layout_paragraphs (2.1.2). geofield_map 11.1.8 Minor update available for module geofield_map (11.1.8).

bg_image_formatter

18,491 sites Security covered
View on drupal.org

This module provides an image formatter that allows you to set an image in background of a tag.
The images are from a field of an entity and not from a configuration page or a custom entity or something else, so it's very easy to setup and manage.

It contains a submodule to handle responsive images as well.

Use cases

  1. You want to display a image on the back of a div when viewing a particular node.
  2. You want to display a random image on the back of a div on the frontpage only. This can be done using Views. Create a block, select the "Background Image" formatter for your image field, save, place the block, boom, you're done.

Dependencies

  1. bg_image (required only in 1.x versions): It's using the API of this module to do it's magic.
  2. Token
  3. Entity for the Entity Token submodule. (optional)
  4. Views (optional): When using in Views, it can create very nice landing pages using random images.

Why use Views with it ?

You can use use the module Views to create a block, just like the second screenshot.
You have to select the image field, then, choose the "Background image" formatter.
The output of this block is null, so, it won't be displayed but the block will be executed and will set the background image correctly.

This is great if you need to set a random wallpaper on your site, add a sort criteria, choose "Global: random" and you're done.
Every time the page load, it will execute the View, choose a random node, extract the image field and set it as background.
You can have a more fine grained control of the "Global: Random" criteria by using Views Random Seed.

Help

You should check the screenshots, it's quite self-explanitory or use the issue queue !

Others related modules

Activity

Total releases
1
First release
Feb 2025
Latest release
1 year ago
Release cadence
Stability
100% stable

Releases

Version Type Release date
8.x-1.18 Stable Feb 14, 2025