Css/Html : Automatically resizing image which is in a circle

Question

I would like to put an image into a circle.

My code works fine, but if the image is so big, image is not resizing and i don't see anything in the circle.

How can i automatically resize the image to put it into my circle ?

Here is the html code :

    <div class="roundedImage" style="background: url(img/desktop/personne.jpg) no-repeat 0px 0px;">
&nbsp;
</div>

And here is the CSS code :

.roundedImage {
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
}

And now, here is the result :

Answer 1

To let the background-image fully fill the space that is available you can use background-size: cover;:

.roundedImage {
    background: url(http://placehold.it/50x50);
    background-repeat: no-repeat;
    background-size: cover;
    
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
}

Note that i've added the inline style in the css code.

jsFiddle

Answer 2

Use CSS property background-size to set the size of the image set as a background in your div:

.roundedImage {
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;
    background-size:90px 0px; 
}