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

Question

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   lt div class  thumb  data-image-src  images img jpg  gt  lt  div gt   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

User · Answer

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

User · Answer

For those who want a dumb down answer like me  Something like how to steps as 1  2  3  Here it is what I did  First create the HTML markup   lt div class  thumb  data-image-src  images img jpg  gt  lt  div gt    Then before your ending body tag  add this script  I included the ending body on the code below as an example  So becareful when you copy   lt script gt  var list   document getElementsByClassName  thumb     for  var i   0  i  lt  list length  i        var src   list i  getAttribute  data-image-src      list i  style backgroundImage  url      src            lt  script gt    lt  body gt

User · Answer

How about using some Sass  Here s what I did to achieve something like this  although note that you have 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 of your data attribute values  Then use Sass  each to iterate through and select all the data-attributes in the HTML  Then  bring in the iterator variable and have it match up to a filename   Anyway  as I said  you have to list all of the values  then make sure that your filenames incorporate the values in your list

User · Answer

HTML CODE   lt div id  borderLoader   data-height  230px  data-color  lightgrey  data-  width  230px  data-image  https   fiverr- res cloudinary com t profile thumb q auto f auto attachments profile photo a54f24b2ab6f377ea269863cbf556c12-619447411516923848661 913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a jpg  gt    lt  div gt    JS CODE   var dataValue  dataSet key  dataValue   document getElementById  borderLoader      data set contains all the dataset that you are to style the shape  dataSet         height  dataValue dataset height      width  dataValue dataset width      color  dataValue dataset color      imageBg  dataValue dataset image     dataValue style height   dataSet height  dataValue style width   dataSet width  dataValue style background     f3f3f3 url   dataSet imageBg    no-repeat  center

User · Answer

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

User · Answer

It is not best practise to mix up content with style  but a solution could be   lt div class  thumb  style  background-image  url  images img jpg    gt  lt  div gt

User · Answer

HTML   lt div class  thumb  data-image-src  img image png  gt    jQuery       thumb    each function       var attr     this  attr  data-image-src       if  typeof attr     typeof undefined  amp  amp  attr     false            this  css  background    url   attr                  Demo on JSFiddle  You could do this also with JavaScript

User · Answer

You will need a little JavaScript for that   var list   document getElementsByClassName  thumb     for  var i   0  i  lt  list length  i        var src   list i  getAttribute  data-image-src      list i  style backgroundImage  url      src             Wrap that in  lt script gt  tags at the bottom just before the  lt  body gt  tag or wrap in a function that you call once the page loaded

[css] Using HTML data-attribute to set CSS background-image url

Examples related to css

Examples related to background-image

Examples related to custom-data-attribute