Using HTML data-attribute to set CSS background-image url

background-image, css, custom-data-attribute

Solution

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

Problem

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS. (I would prefer to not have the page styling rely on jQuery if possible) My question regards: `Data-Attribute` in HTML `Background-image` in CSS I am using this format for my html thumbnails: `<div class="thumb" data-image-src="images/img.jpg"></div>` and I assume the CSS should look something like this: ``` .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: attr(data-image-src);/*This is the question piece*/ } ``` My goal is to take the `data-image-src` from the `div.thumb` in my HTML file and use it for each `div.thumb`(s) `background-image` source in my CSS file. Here is a Codepen Pen in order to get a dynamic example of what I am looking for: http://codepen.io/thestevekelzer/pen/rEDJv

Original source