Turn image SRC into background-image in jQuery

Question

http://stackoverflow.com/questions/2183347/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

Answer 1

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