Adjust image to <div> size

Question

Well, I’m creating a mini social network but I’m having a little problem, the profile image does not fit the div.

My code is:

<div class="profilepic"></div>

<style>
.profilepic {
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(url da foto de perfil);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
</style>

Answer 1

Set the size of the image, also the size of the div

.profilepic {
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(http://1.bp.blogspot.com/-qnQOjPW5TGY/TmjhXuZGBzI/AAAAAAAAHzM/wVzoFozSlg8/s640/paisagem+peaceful_place_by_julie_rc.jpg);
background-size: 150px 150px;
background-repeat: no-repeat;
background-position: center;

}

<div class="profilepic"></div>

Answer 2

I don’t quite understand what you want, but that would be it?

.profile{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.profile img{
    width: 100%;
}

<div class="profile">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/92/80/c1/9280c111e34752405eb524d4ed0750e6--ian-somerholder-beautiful-men.jpg">
    </div>

Answer 3

Can use background-size: cover since you are inserting the image url directly into css.

.profilepic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url(https://i.stack.imgur.com/Rpt58.jpg) no-repeat center center;
  background-size: cover
}

<div class="profilepic"></div>