How can I convert to greyscale the background image in CSS?
<p>I have an html section,</p>

<pre><code>&lt;div id="home"&gt;
    ...
&lt;/div&gt;
</code></pre>

<p>and the following css applied,</p>

<pre><code>  #home {
      background: url(../images/main.png) no-repeat center center fixed; 
      display: table;
      height: 100%;
      position: relative;
      width: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
  }
</code></pre>

<p>My question is, how can I select the background image, which was set by CSS as background,  so I can apply a filter? The only thing I want to do is to grayscale the background image. Which is the appropriate selector for a property?</p>