Circle Border on Images - background-image Method

by Megan Rose

HTML

<div class="circle" style="background-image:url('http://oi65.tinypic.com/14kxmag.jpg');">
</div>
<br />
<div class="smallcircle" style="background-image:url('http://oi65.tinypic.com/14kxmag.jpg');">
</div>
<br />
<div class="circle" style="background-image:url('http://oi63.tinypic.com/2pzy4ad.jpg');">
</div>
<br />
<div class="smallcircle" style="background-image:url('http://oi63.tinypic.com/2pzy4ad.jpg');">
</div>

CSS

body {background: #000;}

/* Circle Border on Images */
/* Using background-image Method to Truly Center Images */
.circle {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    background-color: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.smallcircle {
    width: 75px;
    height: 75px;
    border-radius: 100px;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    background-color: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}