Remove <img /> and append div with background-image with same <img /> source

by Faisal Khan Janjua

HTML

<div class="img-block">
    <a href="http://anydummy.link">
      <img src="https://dummyimage.com/200x130/333333/00ff00.png" />
    </a>
</div>
<div class="img-block">
    <a href="http://anydummy.link">
      <img src="https://dummyimage.com/200x130/333333/ff0000.png" />
    </a>
</div>

CSS

.img-block {
  float:left;
  width:200px;
  height:130px;
  border-left:1px solid #FFF;
}
.img-block a > div{
  width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
img {
  width:100%;
  height: auto;
  display:none;
}

JavaScript

jQuery('.img-block a').each(function() {
		var profileImgSrc = jQuery(this).find('img').attr('src');
		jQuery(this).append('<div style="background-image:url('+profileImgSrc+')"></div>');
});