title: Dynamic background image with background color
body: <p>I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half. </p>
  
  <p>Now normally to do this i would use the following piece of CSS:</p>
  
  <pre><code>background: blue url('img.png) right no-repeat;
  </code></pre>
  
  <p>and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.</p>
  
  <p><strong>stylesheet.css</strong></p>
  
  <pre><code>.bg-color {
      background: blue;
  }
  </code></pre>
  
  <p><strong>index.html</strong> </p>
  
  <pre><code>&lt;div class="bg-color" style="background:url('img.png') right no-repeat;"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?</p>
  
  <p>Thanks</p>