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