css circle profile pic
CSS

CSS Circle Image Tutorial

In this tutorial, we’ll show you how to use CSS3 to make circle image which has been popularly implemented for profile picture or avatar. Learn how to use border-radius and background-image technique to apply the circle effect to an image without having to crop it!

Let’s start with our original image.

css circle image tutorial 1

If you already have a square image, that’s very easy. You only need to apply a border-radius of 50% to it and it’s done!

#yourImg {
   border-radius: 50%;
}

css circle image tutorial 2

However, in real world scenario, you can’t manage to have square 1:1 ratio of all incoming image right? And things will turn ugly if that happen. The circle will turn into ellipse!

css circle image tutorial 3

The solution is quite simple, you need to apply the image as a div background instead. The magic is background-size: cover. This will scale the background image to be as large as possible so that the background area of the div is completely covered by the background image. We’ll keep the 50% background-radius and also add width and height properties.

#imgDiv {
  width: 300px;
  height: 300px;
  background-image: url("path_to_your_profile.png");
  border-radius: 50%;
  background-size: cover;
}

And here is the result. Now you don’t have to worry about the image ratio anymore.

css circle image tutorial 4

If you want to change the background position of the avatar, that’s easy too. Just play with background-position.

#imgDiv{
  width: 300px;
  height: 300px;
  background-image: url("path_to_your_profile.png");
  background-position: -25px -20px;  
  border-radius: 50%;
  background-size: cover;

}

css circle image tutorial 5

Watch the live version of this tutorial in our video. Feel free to subscribe to our channel for more ?

Red Stapler Channel: https://www.youtube.com/c/RedStapler_channel

Leave a Reply

Your email address will not be published. Required fields are marked *