Space image inside the circle - html

Question

I have this fiddle https://jsfiddle.net/obzpLy1g/
Basically its an image inside a red circle. Would it be possible to space the image inside the circle
My html looks like this
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: cover;
background-position: center;
background-origin: padding-box;
background-clip: padding-box;
padding: 20px;
border: 1px solid red;
"></div>
My code do not give the image inside the circle a padding of 20px like i would have wanted.

Answer 1

You need to clip the image to the content-box not the padding-box
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: contain;
background-position: center;
background-origin: content-box;
background-clip: content-box;
background-repeat: no-repeat;
padding: 20px;
border: 1px solid red;
"></div>

Answer 2

To ensure you get the whole of the image inside the circle, but still have padding of 20px all round, this snippet puts the image as background to the before pseudo element. That way it doesn't get clipped by the radius setting of the div.
It sets the size to contain to ensure all the image is visible. The given image is rectangular rather than square so it doesn't seem to make sense to clip it if you don't want a headless chicken.
div::before {
content: '';
width: calc(100% - (2 * var(--padding)));
height: calc(100% - (2 * var(--padding)));
position: absolute;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
--padding: 20px;
padding: var(--padding);
border: 1px solid red;
position: relative;
background-color: #eeeeee;
"></div>
Note: the snippet gives the div a gray background for demo purposes, just to make clear the exact positioning and size of the image.

Answer 3

Is this what you are looking for? Run the snippet !
<div style="
width: 50px;
height: 50px;
border-radius: 50%;
background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
background-size: cover;
background-position: center;
background-origin: padding-box;
background-clip: content-box;
padding: 20px;
border: 1px solid red;
"></div>
background-clip:content-box;
Clip the image inside content-box
let me know if it is not what you asked I will try again.