CSS Multiple Background Images, one using Stylesheet, other Inline

Question

I know it's possible to have two background images with something like

#example1 {
  background-image: url(top.gif), url(bottom.gif);
  ...
}

But I have one of my images dynamically defined on the element itself with an inline style ="..." tag,

<div class="grid-item grid-item-flagged" id='{{ album.id }}'
    style="background-image: url({{ album.photo_thumb.thumbnail.url }})"> 
</div>

and I'd like to be able to add a class which would add another background-image on top of it.

.grid-item-flagged {
background-image: url("/media/round_outlined_flag_black_48dp.png");
}

The problem is the inline style tag overrides the stylesheet (which I know is by design.)

The only option I can think of is to add them both dynamically inline (which I'd like to avoid.)

Answer 1

I would use a pseudo-element to do that.

#example1 {
  position: relative;
/*  ... */
}
#example1:before {
  content: '\a0';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: inherit;
  background-image: url(bottom.gif);
  z-index: 1;
}

Answer 2

you need overwrite the inline style rule, you can use the !important to do this

#example1 {
  background-image: url(top.gif), url(bottom.gif) !important;
  ...
}

you can see the specify order here

And here a image to see it in a better way