💾 Archived View for g.codelearn.me › 2018-02-20-circle-image-css.gmi captured on 2024-07-09 at 00:09:24. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

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>