Drupal 7: Background Images Formatter

David G - DrupalOften times on a website you want a visual splash or decoration on a webpage. And 1 example of this is to place an image behind some region or block your webpage. There are many modules in Drupal to help to accomplish this visual display and but by far the simplest available in Drupal is the Background Images Formatter module.

If you would like to test out the background images formatter then I recommend spinning up a test site at SimplyTest.me.

After installing the module the simplest usage of the module is to add an image field to an existing or new content type. This image, or images, will be used to create the background image.

Add an image field to any Node. This will be the Nodes background image.

Add an image field to any Node. This will be the Nodes background image.

After adding an image field to the content type you can then manage the content type’s display to show the background image when on the Node. The background image may be set to any HTML element selectable by a valid CSS selector:

Full settings for Node background image.

Full settings for Node background image.


Please excuse the ugly cropping in the above image, there is so much text on that page that full image would be huge on most displays so I attempted to crop it down abit and its formatting got a bit wonky. But, as you can see we can select where the image is to be displayed and set the background-image CSS properties to be used for the image.

Here is what the output can look like:

Example of applied background image.

Example of applied background image.

Personally I find this incredibly useful. If you need to applied to a home as randomized background images … the module page recommends making a View block and showing it on the homepage of background images. This module additionally has some child modules that will let you apply background images to URL paths in drupal which are not merely a Node. But if you understand this much of the module — the global background-image styling options are very similar. I hope you can see how useful this module can be!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *