original image
I would like to know how to put the gray background and cut the outside of the player to stay just inside the circle.
You can create an img inside a div with "overflow: hidden;"
.circle {
background-color: #aaa;
border-radius: 50%;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
}
.circle img {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="circle">
<img src="https://i.stack.imgur.com/atUuf.png">
</div>
I would do it as follows:
img{
background-color: #ddd;
border-radius: 100%;
height: 200px;
object-fit: cover;
width: 200px;
}
<img src="https://i.stack.imgur.com/atUuf.png"alt="" />
This for testing, in development would put a class or ID, I find it simpler as well.
CSS - just apply a class on a button with the image as background, however it is advisable to apply a border.
.tim{
border: 2px solid #AD235E;
border-radius: 150px;
width: 200px;
height: 190px; background-image: url(https://i.stack.imgur.com/atUuf.png);
background-position: center;
}
<button class="tim">
</button>
Can be a div too, just put background color in CSS
.tim{
//border: 2px solid #AD235E;
border-radius: 150px;
width: 200px;
height: 190px; background-image: url(https://i.stack.imgur.com/atUuf.png);
background-position: center;
background-color: #C0C0C0;
}
<div class="tim">
</div>