CODEWITHSUNDEEP
jquery
jbwharris
jbwharris

Reputation: 720

Turn image SRC into background-image in jQuery

How to set the image src using jQuery

I am looking to do the opposite of what this jQuery snippet does. I need a bit of code that will turn

<img src="images/filename.jpg">

to become 

<div class="imageBox" style="background:url(images/filename.jpg)"></div>

I've searched up and down trying to find something that will do this but have come up empty. I'm no jQuery guru, so I would appreciate any help someone could offer. Thanks

Upvotes: 4

Views: 9008

Answers (1)

Josh Stodola
Josh Stodola

Reputation: 82483

$("img").each(function(i, elem) {
  var img = $(elem);
  var div = $("<div />").css({
    background: "url(" + img.attr("src") + ") no-repeat",
    width: img.width() + "px",
    height: img.height() + "px"
  });
  img.replaceWith(div);
});

Live Demo

Upvotes: 9

Related Questions