Change background on element with multiple background images

Question

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?

here is the example code - HTML:

<div id="ab_a" class="banner_button">           
     <h2>Title A</h2>`
</div>

<div id="ab_b" class="banner_button">       
     <h2>Title B</h2>`
</div>

<div id="ab_c" class="banner_button">           
     <h2>Title C</h2>`
</div> 

etc.... (there could be several thousand of these)

The CSS:

#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;
}

...I don't want to have to repeat this block of code 1000's of times in a dynamic CSS file.

How can I separate the background url (the only bit which changes) from the rest of the code?

BTW - Putting just the background url inline within the script will not work, it will ignore all the CSS properties in the stylesheet.

Thanks in advance.

Answer 1

Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.

jQuery to the rescue.
jsFiddle demo in action

Inside your CSS set the second background to none:

.banner_button{

    background: linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ), none  50% / cover;  /* notice the `none` for the second layer */

    width: 100%;
    padding-bottom: 37.01%;
    position: relative;
    float: left;
}

while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-* attribute of your generated element:

<div class="banner_button" data-bg="../images/whatever.jpg"></div>

Than using jQuery, replace that none value with the value holded by the data-bg attribute:

$(".banner_button").css("backgroundImage", function(i, v){
  return v.replace("none", "url("+ $(this).data("bg") +")" );
});

That's it.
jQuery will rebuild the whole background layers for you!