Welcome to our first post on Drupal Trix. On this topic, we will show you how to get inline CSS in any Views field on Drupal 7.

The Problem

First of all: why would you use inline CSS in a Views field if you can use external files? Well because in some cases, inline CSS is the only way to achieve something. Let’s say you have a blog running on Drupal and would like to display the image from field_image as a background image on field_nothing. In this situation, it is impossible to define every image in your CSS-files.

You would end up trying to Rewrite Results in field_nothing and make something like this with replacement patterns:

<div class=”article-img” style=”background: url([field_image]);”>Title of your article</div>

The idea is simple and it would have been a nice solution. But Views came to shut down that party. As CSS inline styles are filtered by XSS in Views, they will be erased in your display so you would end up with this:

<div class=”article-img”>Title of your article</div>

Oh darn, how do we solve this?