Is it possible to have two background images using a combination of CSS and inline styling?
#example1 {
background-image: url(top.gif), url(bottom.gif);
...
}
For instance, one image may be dynamically defined within the element itself using an inline style ="..." attribute:
<div class="grid-item grid-item-flagged" id='{{ album.id }}'
style="background-image: url({{ album.photo_thumb.thumbnail.url }})">
</div>
Now, what if we wanted to add another background image by adding a separate class?
.grid-item-flagged {
background-image: url("/media/round_outlined_flag_black_48dp.png");
}
The issue arises when the inline style tag takes precedence over the stylesheet as expected,
One solution could be adding both background images dynamically inline, although this may not be ideal.