Drupal - A better solution to make image field into div background?

There is also the Background Images module suite:

Background images is a collection of modules that allows users to add background images to html elements on pages of the site.

There is also a Field Group sub-module for background image support called Field Group Background Image:

This module creates a field group display formatter that consists in a wrapper with a background.

The background can be set from:

  • An image field of the entity being displayed
  • A color field (of Color Field or jQuery Colorpicker modules)

This module can be used alongside Display Suite, and is particularly useful for creating custom Fieldable Panels Panes bundles.

You mention parallax scrolling ... I know what that is, I've never had to implement it -- you may want to try to use Parallex Background:

This a simple module that allows to set a vertical Parallax effect on the background of any element on the DOM.

I kindly suggest you work more on your Google-fu skills.


Instead of using one of those modules, you could override the field output through a theme function like this:

    function MYTHEME_field__field_someimgefield_image($variables) {
        $output = '';

        // Render the label, if it's not hidden.
        if (!$variables['label_hidden']) {
            $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
        }

        // Render the items.
        $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
        foreach ($variables['items'] as $delta => $item) {
            // Generate styled background image.
            $img_uri = $item['#item']['uri'];
            $img_style = $item['#image_style'];
            $bg_img = image_style_url($img_style, $img_uri);
            $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
            // Write image url to inline css and drop the rendered item.
            $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . ' style="background-image:url(' . $bg_img . ')"></div>';
        }
        $output .= '</div>';

        // Render the top-level DIV.
        $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

        return $output;
    }

In your view, enable "Use field template" in the field's style settings. Thus Views will render your field via the theme function above. Of course, you will have to give the field some width and height to make the background image visible.


You need Image URL Formatter module perhaps.

This module add[s] a url formatter for image field. Then you can output image url directly.

Works with Views. It will give you an additional "Formatter" choice, which should say something like "Path to the image" or "URL to the image".

Also regarding "Global: Custom text", I think this is meant to be FULL HTML, but it is run through filter_xss and other various sanitizers. So you can put the HTML directly in the field, you don't need a Text input filter.