A better solution to make image field into div background?

Question

In Drupal 7, I want to turn my image field in Views to looks something like

<div style="background-image:url([field_someimgefield_image]);"></div>

so I can apply the JQuery Parallax scrolling effect. However, I'm not able to get the full "absolute path" of my image, even I use the "absolute path" on "output this field as a link" and "strip HTML tags" features. All I got is the file name, not the full absolute path.

Another issue I have is the "Global: Custom text" in fields, it does not has the text filter option, so I would not be able to write the above code.

So far, I only found the "BackgroundField" module for the replacement. Anyone know a better solution for div background image?

PS: the CSS trick only make it looks similar, they are totally differnt.

------ update info on Feb. 2 2015 : 12:58pm ---

The Views that I have is a list of node that contain Title and other fields. Therefore, each node should has their own background from image field.

------ update info on Feb. 2 2015 : 02:46pm ---

Looks like the "BackgroundField" module I mentioned above is similar to Background Images, which does not work too.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

Maybe the Dynamic Background module is what you need as it allows you to target a div? It also has a handy Context Background for setting up backgrounds based on context for things like dates, paths, etc. https://www.drupal.org/project/dynamic_background