I attempted to achieve a specific effect with my code snippet:
.mask {
width: 200px;
height: 200px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: url(http://lapeniche.net/wp-content/uploads/2013/12/Chat.jpg) no-repeat;
background-position: -50px -50px; /* this allows to move the image inside */
/* but how to resize the CAT picture ???? */
}<img class="mask">While I managed to adjust the position of the image using background-position, I struggled to resize the background picture.
I experimented with css3 masks, however, unfortunately, it only seemed to work in Chrome.
-webkit-clip-path: circle(100px at 150px 150px);
-moz-clip-path: circle(50%, 50%, 30%);
clip-path: circle(50%, 50%, 30%);
Does anyone have any suggestions or solutions?
You can view the fiddle here: http://jsfiddle.net/nnr64y3b/
The objective is to create a rounded circle where I can alter both the position and dimensions of the inner image.