<div class="circle twitter"></div>
<div class="circle"></div>
<div class="circle twitter"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
body {
    padding:0; 
    background: black;
    margin: 0;
    background: url("http://i.imgur.com/H3ytm9V.jpg") no-repeat center center fixed;
} 

.circle {
    /* the height would be the same as the height of the circle */
    /* plus the top and bottom Xpx (10px) margin from :after */
    height: 220px;
    overflow: hidden;
    /* change this for the circle alignment */
    text-align: center;
}

.circle:after {
    /* define the width and height as you'd like */
    width: 200px;
    height: 200px;
    /* a huge border is the one playing as the blue background */
    border: 1024px solid #598DCA;
    /* double the border radius to be circular */
    border-radius: 2048px;
    display: inline-block;
    /* the margins are the same as the border */
    /* but for the top and bottom add Xpx for the padding (here being 10px) */
    margin: -1014px -1024px;
    content: "";
}

.twitter:after {
    background: url("https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-48.png") no-repeat 50% 50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js