<-- back

Circle image with CSS

Here is post about how to make circled image with css. I have to note it since I can’t remember how css works in general and can’t force myself to learn it.

Here is the result:

I was trying to use just border-radius but it’s not super great since it doesn’t allow us to center the content of image.

Solution is class similar to this one:

.img-circular {
    width: 50px;
    height: 50px;
    background-size: cover;
    display: inline-block;
    border-radius: 50px;
    background-position: center;

Of course you also have to set background-image: url(<the url>) for your image. I do it with style attribute directly. Here is how the element code looks like in general:

<div style="background-image: url('url-here')" class="img-circular"></div>

As you can see there is no img tag at all and we use div with background image instead. It allow us to center the background.

Feel free to contact me for feedback or questions. Find my contacts on About page.