title: How to modify the fill color of an SVG image when being served as background image?
body: <p>Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>polygon.mystar {
      fill: blue;
  }​
  
  circle.mycircle {
      fill: green;
  }
  </code></pre>
  
  <p>This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.  </p>
  
  <pre class="lang-css prettyprint-override"><code>html {      
      background-image: url(../img/bg.svg);
  }
  </code></pre>
  
  <p>How can I change the colors now?  Is it even possible?</p>
  
  <p>For reference, here are the contents of my external SVG file:</p>
  
  <pre class="lang-svg prettyprint-override"><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"&gt;
  &lt;polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
      118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/&gt;
  &lt;circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/&gt;
  &lt;/svg&gt;
  </code></pre>