Kevin Powell - Community•13mo ago

Place a circle behind a DIV (CSS)

Hi. I have no problem creating the modal. My issue is how to get the circle behind it, and center both of them in the middle of the browser. I have included a screenshot of what I am trying replicate. Thanks for your help.

21 Replies

Tok124 (CSS Nerd)•13mo ago

You can use a pseudo element

Tok124 (CSS Nerd)•13mo ago

Here is the compiled css

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.box {
  width: min(400px, 100% - 3em);
  aspect-ratio: 2/1;
  background: #e6e6e6;
  position: relative;
  border-radius: 10px;
}
.box::before {
  content: "";
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0080ff;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.box {
  width: min(400px, 100% - 3em);
  aspect-ratio: 2/1;
  background: #e6e6e6;
  position: relative;
  border-radius: 10px;
}
.box::before {
  content: "";
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0080ff;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
}

and yeah the html is just a div with class "box"

Mannix•12mo ago

if you would use dialog element for the modal you can leverage the ::backdrop selector to make the cicle https://codepen.io/MannixMD/pen/BaMOJBX

Mannix

CodePen

BaMOJBX

...

NeneOP•12mo ago

Thanks for the help Thanks. You made it simple for me. I got a few questions: why did you type the width as min(400px, 100% - 3em);? Secondly, what does translate do? I was thinking top and left alone could do the trick. Anyway, I changed the width to 710px. But I want to understand the reasoning behind your choice.

Tok124 (CSS Nerd)•12mo ago

width:min(400px, 100% - 3em); is the same as writing

.element {
  max-width:400px;
  width:calc(100% - 3em);
}

.element {
  max-width:400px;
  width:calc(100% - 3em);
}

But, if you use min function, you can do it all with just the width property. And you need the width to be 100%. The reason i do - 3em is to prevent the element from touching the sides of the screen, so it leaves some spacing. It just looks a lot better. translate property is the same as doing transform:translate(); but the the transform:scale(); transform:rotate(); and transform:scale(); have their own properties which i prefer to use instead of transform. It's also quicker to write and you can avoid some problems by using their own properties. You can run in to problems when you have multiple transforms. Therefore i use translate. But it's used to move the element. And just doing top:50%; and left:50%; will not center the element so you have to either use translate or transform:translate() to get it centered The reason you need to set the width to 100% is because i used place-items:center; on the parent (body) But normally divs take up 100% of the width since divs are block elements

NeneOP•12mo ago

@tok124 (CSS Nerd) all right. Thanks for the explanation. I hope you don't mind if I ask you questions when I get stuck? And no I don't intend bombarding you with questions. I will make sure I try till I am really stuck before asking for help.

Tok124 (CSS Nerd)•12mo ago

Sure 🙂

Tok124 (CSS Nerd)•12mo ago

Btw, here you can see what happens when you use top:50%; and left:50%; It aligns the top left corner in the center. So you need to move the elements to the left 50% of it's width, and up 50% of it's own height. So that is what the translate is used for

Tok124 (CSS Nerd)•12mo ago

NeneOP•12mo ago

Oh yea it makes sense because the 'anchor' is at top left corner. Reminds me of photoshop. Totally makes sense now. @tok124 (CSS Nerd) You used Linear Graident to create those lines? LoL I probably would have created four divs 🤣 Mehn I have a long way to go.

Tok124 (CSS Nerd)•12mo ago

Yeah xD I love using gradients For example, i made this teamviewer logo using only gradients https://codepen.io/tok124/pen/ZEorNvq

Tim

CodePen

Teamviewer Icon

...

Tok124 (CSS Nerd)•12mo ago

it's just 1 element with a bunch of gradient layers

Tok124 (CSS Nerd)•12mo ago

I have a whole collection of 1 element stuff https://codepen.io/collection/vBJwvr

CodePen

1 element challenge - a Collection by Tim on CodePen

NeneOP•12mo ago

Very interesting @tok124 (CSS Nerd)

Tok124 (CSS Nerd)•12mo ago

Yeah, gradients is amazing 😅

NeneOP•12mo ago

How do you get a div to fill the available width or height? I thought auto was supposed to fix that.

Tok124 (CSS Nerd)•12mo ago

width:auto; on block elements takes 100% width yeah. and width:auto; is the default value

Jochem•12mo ago

@Nene if you have questions that aren't a direct continuation of the problem in the title of the post, it's better to make a new post. That way if anyone else has the same question, they'll be able to find the answer more easily.

NeneOP•12mo ago

Yes please. Thanks for alerting me. Alright.

clevermissfox•12mo ago

To expound on width: min(400px, 100% - 3em); , it will take the Smaller of the two values. So when 100%-3em is smaller than 400px it will use that. There is also the opposite max, which takes the Larger of two values width: max(500px, 60vh); it will use whichever is larger depending on screen size.

NeneOP•12mo ago

Okay. That makes sense. It helps with responsive design..

Gaming

Programming

Place a circle behind a DIV (CSS)