Utilisation de l'attribut HTML data pour définir l'url de l'image d'arrière-plan CSS

Question

J'ai l'intention de créer une galerie de photos personnalisée pour un ami et je sais exactement comment je vais produire le HTML, mais je rencontre un petit problème avec le CSS.
(Je préférerais que le style de la page ne dépende pas de jQuery, si possible).

---

Ma question est la suivante :
Data-Attribute en HTML
Background-image en CSS

J'utilise ce format pour mes vignettes html :
<div class="thumb" data-image-src="images/img.jpg"></div>

et je suppose que le CSS doit ressembler à quelque chose comme ça :

.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*/
}

---

Mon but est de prendre le data-image-src de la div.thumb dans mon fichier HTML et l'utiliser pour chaque div.thumb (s) background-image dans mon fichier CSS.

Voici un Codepen Pen afin d'obtenir un exemple dynamique de ce que je recherche :
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

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+')');
  }

});

Démonstration sur JSFiddle

Vous pouvez également le faire avec JavaScript.

Answer 2

Pour ceux qui veulent une réponse muette comme moi

Quelque chose comme les étapes 1, 2 et 3.

Voici ce que j'ai fait

Créez d'abord le balisage HTML

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

Puis, avant la balise de fin de corps, ajoutez ce script.

J'ai inclus le corps de fin sur le code ci-dessous à titre d'exemple

Alors faites attention quand vous copiez

<script>
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 + "')";
}
</script>

</body>

Answer 3

Voici un exemple simple utilisant jQuery nous pouvons mettre les images en arrière-plan

$('*[data-background-image]').each(function() {
    $(this).css({
        'background-image': 'url(' + $(this).data('background-image') + ')'
    });
});

div{
  height:200px;
  width:100% ;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-background-image="https://via.placeholder.com/500"> </div>

Answer 4

CODE HTML

<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">

</div>

CODE JS

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";