title: Can you apply a CSS filter to background-image of a div style element?
body: <p>Here is the code that I'm looking at:</p>
  
  <blockquote>
  <pre><code> &lt;div class="fullwidth-box vas_row-back1" style="background-color:
   rgba(99,59,0,0.79);background-image:
   url(&amp;quot;http://example.com/wp-content/uploads/2015/11/myphoto.jpg&amp;quot;);background-position:
   center center;background-repeat:
   no-repeat;padding-top:80px;padding-right:40px;padding-bottom:80px;padding-left:40px;margin-bottom:
   60px;margin-top:
   30px;-webkit-background-size:cover;-moz-background-size:cover;-o-
   background-size:cover;background-size:cover;background-
   attachment:none;"&gt;
  </code></pre>
  </blockquote>
  
  <p>I can control the CSS for the .vas_row-back1 class, but I cannot change the output of the style= of the div because the theme creates that.</p>
  
  <p>What I want to do is apply a filter to the image background. When I use:</p>
  
  <pre><code>.vas_row-back1[style] {
  -webkit-filter: grayscale(80%); /* Safari */
  filter: grayscale(80%); }
  </code></pre>
  
  <p>The filter applies to the <em>entire</em> div, including contents.</p>
  
  <p>When I try:</p>
  
  <pre><code>.vas_row-back1[style]:background-image {
  -webkit-filter: grayscale(80%); /* Safari */
  filter: grayscale(80%); }
  </code></pre>
  
  <p>It doesn't register at all, breaks the class. I want to be able to have the filter apply only to the background image of the DIV but not the contents. Do you think this is possible? Thoughts?</p>