<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%;
}
This Pen doesn't use any external CSS resources.