I want to output an image as a background-image of a "section"-tag but it doesn't work.

First I added the Image URL Formatter module, so I do not output the image but the url of the file.

In my view I add the image which generated with the contextual filter of the url. In that field I rewrite the output:

<section style="background-image: url([field_hintergrundbild])" id="slid-unternehmen">

When I check the site I only get this:

<section id="slid-unternehmen"> </section>

I tried several times and it seems to me that Drupal will not accept the "style="..."" tag, Drupal will always remove it! And I don't know why?

If I change the style to class, I get the normal output, as in this example:

<section class="background-image: url(http://....)" id="slid-unternehmen"> </section>

Does anybody have an idea?


To understand why this (= the style being removed) is happening, refer to this comment in the views issue queue:

Rewrite uses filter_xss_admin and allows only the tags listed there.

It also includes a possible solution for it, which is like so:

If you need more than this, then you need to use a template where you have complete control. This ensures that data entered via the UI is safe.

For an alternative solution (instead of using a template), you may want to consider the Background Images Formatter module. Here is an excerpt from its project page:

This module provides an image formatter who allows you to set an image in background of a div. The images are from a field of an entity and not from a configuration page or sth else, so it's very easy to setup and manage.

  • @weristsam : looks like you missed what happened to the "answer" you posted (moderators deleted it now). You (only) should still be able to SEE it within your "deleted answers" (including the various comments from moderators). Whenever you get back to around here, wanna consider what I also suggested in one of the comments there? I.e. as described in drupal.stackexchange.com/help/accepted-answer also ... Nevertheless, "merci" for the kudos. Ps: are you aware of chat.stackexchange.com/rooms/22624/… ? May 25 '15 at 11:48
  • I find it strange that some days ago you created an answer containing "That is exactly what i was looking for.. ". However there is no "accepted" answers to this question ... Still thinking about that? May 28 '15 at 22:35
  • The OP also says i have more time i will check the other solution without an module. (And the answer was not deleted by moderators.)
    – apaderno
    Jun 2 '15 at 5:18

Well if class works then do it using css

<section class="haha" id="slid-unternehmen"></section>

In HEADER click add, and select Global: Text Area.

Then on your text field put:

.haha { background-image: url([field_hintergrundbild]);

For Text format select Full HTML

Checkmark Use replacement tokens from the first row

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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