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.

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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.