Add an image inside a circle made with css

Question

I'm trying to add an image inside a circle built with css. I think I could upload the image correctly but there's a problem with the visualization of the image as you can see below. I've also tried to export the image I want to use as the same size of the circle but either that solution is not working.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow: 0px 0px 15px 0px;
}

.circle img {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}

<div class="grid">
  <div class="cell">
    <div class="inner">
      <div class="circle"><img src="{image2}"></div>
      <div class="caption">
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>
    </div>
  </div>

The layout actually has 12 circles and each one has a different image inside so I can't do that using background-image in the css section (I've also tried that but not even that solution is working)

you could try to embed the image url as background-image url, like this:
And style the background values for circle class — J4R, Aug 02 '22 at 13:52
While you've already accepted an answer - and, honestly, I have nothing useful to add to improve the answer - my own suggestions would be to consider using a (possibly) more semantic HTML layout, with CSS Grid (since that seems to be what you want), as in the [JS Fiddle demo](https://jsfiddle.net/davidThomas/zv0u9ekg/). — David Thomas, Aug 02 '22 at 15:39
Thanks David! I've tried that and it's actually working but If I add more text under one of the circles, the alignement with the text below the circle at the side get problematic (it's alligned with the last line). Is there a way to make it work and have it alligned with the first line of text instead? — Emanuele Pesa, Aug 03 '22 at 10:55
Plus all the image inside the circles are stretched and can't give a shadow only to the circles (it even takes the image inside of the circle) — Emanuele Pesa, Aug 03 '22 at 12:21

Kameron · Accepted Answer · 2022-08-02T14:05:51.520

Use height and width 100% on the img and then use overflow: hidden; on .circle. If you have resolution issues that means the size of the circle is too large for the image to take up all available space. You should either get a larger image or set it as a background-image to .circle.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow: 0px 0px 15px 0px;
  overflow: hidden;
}

.circle img {
  width: 100%;
  position: relative;
  height: 100%;
}

h3 {
  text-align: center;
}

<div class="grid">
  <div class="cell">
    <div class="inner">
      <div class="circle"><img src="https://dummyimage.com/600x400/000/fff"></div>
      <div class="caption">
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>
    </div>
  </div>

You will need to add a few styles for .circle before it shows up as a background-image.

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: 0px 0px 15px 0px;
}

<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/93a33f6ee2b5b1d7617448432f6dfb20aad3d363601ad4f257cd00e0153eb713/12.png');"></div>

This is actually working but it stretch the image as you can see here https://civitonia.cargo.site/26993899 — Emanuele Pesa, Aug 02 '22 at 14:03
@EmanuelePesa If you use a `200x200px` picture with the an appropriate amount of white space it shouldn't be an issue. If you cannot, then use it as a `background-image`. See my edits. You will have to add some custom `background` styles in order for the image to show up — Kameron, Aug 02 '22 at 14:08
@EmanuelePesa One last thing, when you're using `background-images` it is important to make sure the image file size is optimized. — Kameron, Aug 02 '22 at 14:25
What do you mean? Should I export the images in a smaller resolution? — Emanuele Pesa, Aug 02 '22 at 15:30

score 2 · Answer 2 · answered Aug 02 '22 at 13:53

2

You can place the image via CSS, only not in an external stylesheet.

Instead of this:

<div class="circle"><img src="{image2}"></div>

Do this:

<div class="circle" style="background-image:url('{image2}')"></div>

The rest of the CSS properties (background-position, repeat, etc) you put in the external stylesheet, as it will be the same for all the images.

answered Aug 02 '22 at 13:53

Victoria Ruiz

4,913
3
23
40

Victoria it's not working! but the preview image that I've posted in the first picture disappeared! here's the link of the website with the coding updated https://civitonia.cargo.site/26993899 – Emanuele Pesa Aug 02 '22 at 13:56
1

You literally put {image2} in the css... that variable is not showing properly. – Victoria Ruiz Aug 02 '22 at 14:01

Add an image inside a circle made with css

2 Answers2