How to make a round mask over a image

Question

This is my take using css only, but the image is not centred, and also the image get bigger not the mask

jsfiddle Demo

I want to achieve the same affect in here

http://jackietrananh.com/portfolio.php

He is using an image http://jackietrananh.com/img/sprite-s82d3b02845.png but how this can happen with pure css or js?

and without

clip-path

Answer 1

.avatar-frame{border: 2px solid #c7b89e;}
.avatar-frame,.avatar-frame img{
    width: 50px;
    height: 50px;
    -webkit-border-radius: 30px; /* Saf3+, Chrome */
    border-radius: 30px; /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
    }

more here http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 2

With css you can set it as a background and positioning it to center:

background: url("http://media.trb.com/media/photo/2011-11/241153480-30235112.jpg") no-repeat center center;

Here's a demo:http://jsfiddle.net/shbnts90/3/