title: How to add another background-image to existing background in css
body: <p>Modern browsers allows to add multiple, comma-separated backgrounds to element. For example I can define 2 backgrounds like this:</p>
  
  <pre><code>background: url(image1.png) no-repeat left top, url(image2.png) no-repeat right bottom;
  </code></pre>
  
  <p>It's works wonderfull, and all, but there is often a situation then I want to have one background always applied on element, and another only then I add second class or some modificator. For example I want following code:</p>
  
  <pre><code>&lt;style&gt;
      .one { background: url(image1.png) no-repeat left top; }
      .two { background: url(image2.png) no-repeat right bottom;}
  &lt;/style&gt;
  
  &lt;div class="one two"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...to return element with both background applied (code above will return only second). </p>
  
  <p>Is there a way in modern css to add second one without fully copy the first one in it?</p>