title: Using HTML data-attribute to set CSS background-image url
body: <p>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.<br>(I would prefer to not have the page styling rely on jQuery if possible)
  <hr>
  My question regards:<br>
  <code>Data-Attribute</code> in HTML<br>
  <code>Background-image</code> in CSS
  <hr>
  I am using this format for my html thumbnails:<br>
  <code>&lt;div class="thumb" data-image-src="images/img.jpg"&gt;&lt;/div&gt;</code><br><br></p>
  
  <p>and I assume the CSS should look something like this:<br></p>
  
  <pre><code>.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*/
  }
  </code></pre>
  
  <p><hr>
  My goal is to take the <code>data-image-src</code> from the <code>div.thumb</code> in my HTML file and use it for each <code>div.thumb</code>(s) <code>background-image</code> source in my CSS file.</p>
  
  <p>Here is a Codepen Pen in order to get a dynamic example of what I am looking for:<br>
  <a href="http://codepen.io/thestevekelzer/pen/rEDJv" rel="noreferrer">http://codepen.io/thestevekelzer/pen/rEDJv</a></p>