CodePen

HTML

            
              <img class="round" src="http://placekitten.com/200/200">

<div class="avatar">
  <img src="http://placekitten.com/200/200">
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .round, .avatar {
  border-radius: 100px;
  height: 200px;
  width: 200px;
  float: left;
  margin: 20px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("div.avatar").each(function() {
  var el = $(this);
  var url = el.find("img").hide().attr("src");
  el.css("background-image", "url(" + url + ")");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................