Using HTML data-attribute to set CSS background-image url
If you wanted to keep it with just HTML and CSS you can use CSS Variables. Keep in mind, css variables aren't supported in IE.
<div class="thumb" style="--background: url('images/img.jpg')"></div>
.thumb {
background-image: var(--background);
}
Codepen: https://codepen.io/bruce13/pen/bJdoZW
You will eventually be able to use
background-image: attr(data-image-src url);
but that is not implemented anywhere yet to my knowledge. In the above, url
is an optional "type-or-unit" parameter to attr()
. See https://drafts.csswg.org/css-values/#attr-notation.