I have a view to display a content that have an image field, and I need to display this image as a background image of a div so I can apply some CSS on it.

what I tried to do is to rewrite the output of this field using twig to be like this:

<div class="page-image" style="background-image: url({{ field_image }});">

the problem is that Drupal strips style attribute so the output will be like this:

<div class="page-image">

In D7 I used to fix this kind of issues by overriding the template for the specific field, but I couldn't figure out what is the name of the needed template in D8. when I enabled twig debug it turned out that the field is using the template file views-view-field.html.twig which is the default template for all fields in views, but I couldn't find the needed template name for this specific field in this view, I tried to rename it like in D7 to be views-view-field--page-image--field-image.html.twig (the view name is page_image) but it didn't work out.

any suggestions?

  • Note that rendering images through CSS background only makes sense when the image is for decorative purpose. If the image itself has a value for site visitors it's better to render it through <img/> tag.
    – ya.teck
    Jun 1, 2020 at 4:18

2 Answers 2


Set all fields to "Exclude from display", add a "Global: Custom text" field and then build your html there using the "Replacement patterns" available.

I assume this still works in drupal 8.

  • 1
    Thanks @Tom, I already did that, but the problem is that Drupal strips style attribute from the div tag! and my replacement pattern field is in this attribute value.
    – Aghiad
    Nov 17, 2015 at 19:49

While I haven't done that in Views just yet, I did have to put a image as background-image in the Page Title template. The same technique might work in this case as well.

In the preprocess, I did this :

$variables['header_attributes'] = new Attribute(array(
  'style' => "background-image: url('" . $headerImage->toString() . "');",

And then, in page-title.html.twig, I just did this ( headerClass is just another class I add in the Twig template itself :

<header {{ header_attributes.addClass(headerClass) }}>

And this works fine. My style attribute doesn't get stripped off.

Don't forget to add use Drupal\Core\Template\Attribute; at the top, if you want to give this a try.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.