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

[tyler666]

I have two ways of creating circular buttons: http://codepen.io/anon/pen/GiHyJThey 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: \[code\]<img>\[/code\] inside a \[code\]<div>\[/code\], allows user to get a context-menu on the img.\[code\]<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);}\[/code\]Method two: \[code\]background: url\[/code\] on the \[code\]<div>\[/code\]. Less markup.\[code\]<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);}\[/code\]