Simple Background image formatter

This module provides an image formatter that allows you to display the image in a div as background image.
The module extends Drupal's images field. Because settings are attached to the entity, it's very easy to setup and manage.

Features

1. No module dependencies (Other than image).
2. Works with Drupal's field UI.
3. Works with Views.
4. Integrates with Drupal's image styles.
5. Offers 2 modes. (Inline Style & CSS Selector)
6. Works with Media image fields.
7. Allows inline background images to link to the content or to a custom URL.
8. Supports tokens in custom links when the Token module is enabled.
9. Provides entity context variables for template overrides.
10. Provides theme suggestions for entity type, bundle, field, and entity ID.

Inline Style

Instead of generating the normal img markup we now generate the div with an inline style.

This

<img src="PATH" />

is changed to

<div class="[YOUR CLASS]" style="background-image: url('[ABSOLUTE PATH]')">&nbsp;</div>

CSS Selector

This option prevents the img tag from being printed to the dom and instead generates a stylesheet in the dom.

The expected output will be something like this.

<style>
[YOUR SELECTOR]_[ENTITY_ID] {background-image: url('[ABSOLUTE PATH]');}
</style>

Basic Installation and usage.

1. Download and enable the module.
2. Go to Administration > Structure > Content Types (admin/structure/types).
3. Click on Manage Display for the relevant content type. (admin/structure/types/manage/page/display)
4. Change the Format to Background Image for the relevant image field.

Similar module

• Background Images Formatter