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

css

Solution

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`.

Problem

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); } ```

Original source

Related problems