title: Change background on element with multiple background images
body: <p>I have used CSS background on multiple divs to create a number of large format buttons. It looks beautiful, but the buttons are created dynamically, and there could be thousands of them. This means a HUGE dynamic CSS script... it there a better way of giving each element a different CSS background with the same properties? </p>
  
  <p>here is the example code - HTML: </p>
  
  <pre><code>&lt;div id="ab_a" class="banner_button"&gt;           
       &lt;h2&gt;Title A&lt;/h2&gt;`
  &lt;/div&gt;
  
  &lt;div id="ab_b" class="banner_button"&gt;       
       &lt;h2&gt;Title B&lt;/h2&gt;`
  &lt;/div&gt;
  
  &lt;div id="ab_c" class="banner_button"&gt;           
       &lt;h2&gt;Title C&lt;/h2&gt;`
  &lt;/div&gt; 
  </code></pre>
  
  <p>etc.... (there could be several thousand of these)</p>
  
  <p>The CSS: </p>
  
  <pre><code>#ab_a {
        background: 
      linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.6)
      ),
      url(../images/bgimageA.jpg);
      background-size: cover;
      width: 100%;
      padding-bottom:37.01%;
      position: relative;
      float: left;
  }
  #ab_b {
        background: 
      linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.6)
      ),
      url(../images/bgimageB.jpg);
      background-size: cover;
      width: 100%;
      padding-bottom:37.01%;
      position: relative;
      float: left;
  }
  #ab_c {
        background: 
      linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.6)
      ),
      url(../images/bgimageC.jpg);
      background-size: cover;
      width: 100%;
      padding-bottom:37.01%;
      position: relative;
      float: left;
  }
  </code></pre>
  
  <p>...I don't want to have to repeat this block of code 1000's of times in a dynamic CSS file. </p>
  
  <p>How can I separate the background url (the only bit which changes) from the rest of the code? </p>
  
  <p>BTW - Putting just the background url inline within the script will not work, it will ignore all the CSS properties in the stylesheet. </p>
  
  <p>Thanks in advance. </p>