Content field value as background color I have a content type with 4 fields


1.featured_pic
2.company_logo
3.background_color


I'm using views for the teaser rewriting the result.

&lt;div class="portfolio-background-color" style="background-color:{{ background_color }};" &gt;

       &lt;span class="Portfolio-featured-container"&gt;
           {{ featured_pic }} 

       &lt;span class="featured-logo-container"&gt;
      {{ company_logo }}
        &lt;/span&gt;
   &lt;/span&gt;
&lt;/div&gt;


However the background color is not being picked up. How can I use it as an inline style value.

or is it possible to pass the value {{ background_color }} to jquery

  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".portfolio-background-color").hover(
      function() {
          //mouse over
          $(this).css('background', '*{{ background_color }}*')
      }, function() {
          //mouse out
          $(this).css('background', '')
      });
  });
  &lt;/script&gt;
Looks like the Views text area filters style="anything" out to prevent XSS attacks. If you create a template file for your view, I believe it will work.

As pointed out by @4K4


  If you put a twig variable inside of a style attribute standard
  sanitizing won't prevent . To protect against this you need to
  filter even brackets. See XSS attacks and style attributes


Therefore, you need to make sure your field is not a text field, where the user has the power to write/put whatever they want. You should use a Select list field or better yet use a color field.