Circle image with CSS

Tue, 20 Feb 2018 00:00:00 +0000

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.

Ruslan's Tech Blog

Circle image with CSS