Background-image cuts off on top, left, and right points of a CSS circle

Question

I am having a problem with an image getting cut off on the top, left, and right points of my div. When I don't set background-repeat: no-repeat; the image repeats on only those three points which makes an awkward feel to it.

----^----
<------->
----X----

The 'X' is the point that is not effected by this.

When I set background-repeat: no-repeat; it cuts those points off completely and leaves a box like shape rather then a circle.

The top is the most noticeable point out of the three

Tested in Chomre, Firefox, and Safari.

Here is the css:

#picFrame {
    height: 60%;
    position: absolute;
    border-radius: 50%;
    top: 15%;
    left: 50%;
    background-image: url("http://jpowell43.mydevryportfolio.com/me.jpg");
    background-size: cover;
    background-position: top center;
    /*background-repeat: no-repeat;*/
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.6);
}

Finally, a fiddle: Demo

Answer 1

Use background-position: -10px center to account for the 10px border, and make the background-size: 110%; so it expands horizontally to be covered by the border. Then set background-repeat: no-repeat

DEMO