Using the HTML data attribute to set the URL of the CSS background image

Question

I plan to create a custom photo gallery for a friend, and I know exactly how I will create the HTML, however I ran into a little CSS problem.
(I would rather not have a page style that relies on jQuery, if possible)

---

My question concerns:
CSS Data-Attribute Background-image HTML in CSS

---

I use this format for my html thumbnails:
<div class="thumb" data-image-src="images/img.jpg"></div>

and I assume that 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 data-image-src from div.thumb in my HTML file and use it for each div.thumb (s) Background-image source in my CSS file.

Here is the Codepen pen to get a dynamic example of what I'm looking for:
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

Ultimately you will be able to use

 background-image: attr(data-image-src url); 

but it has not yet been implemented so far, as far as I know. In the above example, url is an optional unit-type parameter for attr() . See https://drafts.csswg.org/css-values/#attr-notation .

Answer 2

It is not recommended to mix content with style, but the solution may be

 <div class="thumb" style="background-image: url('images/img.jpg')"></div> 

Answer 3

For this you need some JavaScript:

 var list = document.getElementsByClassName('thumb'); for (var i = 0; i < list.length; i++) { var src = list[i].getAttribute('data-image-src'); list[i].style.backgroundImage="url('" + src + "')"; } 

Wrap the <script> below immediately before the </body> or wrap the function that you call after the page loads.

Answer 4

HTML

 <div class="thumb" data-image-src="img/image.png"> 

JQuery

 $( ".thumb" ).each(function() { var attr = $(this).attr('data-image-src'); if (typeof attr !== typeof undefined && attr !== false) { $(this).css('background', 'url('+attr+')'); } }); 

JSFiddle Demo

You can do this also with JavaScript.

Answer 5

How about using some Sass? Here is what I did to achieve something similar (although note that you need to create a Sass list for each of the data attributes).

 /* Iterate over list and use "data-social" to put in the appropriate background-image. */ $social: "fb", "twitter", "youtube"; @each $i in $social { [data-social="#{$i}"] { background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0; background-size: cover; // Only seems to work if placed below background property } } 

Essentially, you list all data attribute values. Then use Sass @each to repeat and select all the data attributes in the HTML. Then enter the iterator variable and map it to the file name.

In any case, as I said, you need to list all the values, and then make sure your file names contain the values ​​in your list.