Which is a better way to create circular buttons: <img>, or background-image? [duplicate]

Question

I have two ways of creating circular buttons: http://codepen.io/anon/pen/GiHyJ They both seem equal, but I'm unsure which way is more stable, cross platform, usable, etc. I only have an android phone to test on, and both look good. Should I use one method over the other, and why?

Method one: <img> inside a <div>, allows user to get a context-menu on the img.

<div class="method1">
  <img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>

.method1 {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

Method two: background: url on the <div>. Less markup.

<div class="method2"></div>

.method2 {
    background: url(http://i.imgur.com/TLFDrvp.jpg);
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

Answer 1

Use images for content and background-image for design elements. In your case, buttons are a part of your design and should be used background-image.