Cara menggunakan css background circle

I need make something like this. and I want to do it for a

I can do this by using an image and adding another div inside and z-index.

But I want to know if it's possible to make in this circle in backgroud using css.

asked Jan 3, 2012 at 7:48

Jitendra VyasJitendra Vyas

144k225 gold badges563 silver badges841 bronze badges

0

Keep it simple:

.circle
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }

Width and height can be anything, as long as they're equal

answered Feb 19, 2014 at 8:54

Gal MargalitGal Margalit

5,2156 gold badges50 silver badges54 bronze badges

1

Check with following css. Demo

.circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

For more shapes you can follow following urls:

//davidwalsh.name/css-triangles

Gal Margalit

5,2156 gold badges50 silver badges54 bronze badges

answered Jul 9, 2013 at 10:27

2

Use circular gradient for background property

div {
  width: 400px; height: 400px;
  background: radial-gradient[ellipse at center,  #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%];
}

answered Nov 10, 2016 at 19:34

1

It can be done using the border-radius property. basically, you need to set the border-radius to exactly half of the height and width to get a circle.

JSFiddle

HTML

CSS

#container
{
    height:400px;
    width:400px;
    border:1px black solid;
}

#inner
{
    height:200px;
    width:200px;
    background:black;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    margin-left:25%;
    margin-top:25%;
}

answered Jan 3, 2012 at 7:55

AyushAyush

41k48 gold badges159 silver badges237 bronze badges

5

You can use the :before and :after pseudo-classes to put a multi-layered background on a element.

#divID : before {
    background: url[someImage];
}

#div : after {
    background : url[someotherImage] -10% no-repeat;
}

answered Jan 3, 2012 at 8:15

AcnAcn

9702 gold badges10 silver badges22 bronze badges

1

Here is a solution for doing it with a single div element with CSS properties, border-radius does the magic.

CSS:

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    background:#000
}

HTML:

Hello

answered Jul 9, 2013 at 10:18

WrenchWrench

3,7304 gold badges30 silver badges46 bronze badges

Maybe you should use a display inline-block too:

.circle {
    display: inline-block;
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    z-index: -1;
}

Timus

8,4225 gold badges12 silver badges26 bronze badges

answered Dec 27, 2020 at 22:02

JERVIJERVI

335 bronze badges

If you want to do it with only 1 element, you can use the ::before and ::after pseudo elements for the same div instead of a wrapper.
See //css-tricks.com/pseudo-element-roundup/

answered Jan 3, 2012 at 8:15

Mr ListerMr Lister

44.5k15 gold badges107 silver badges146 bronze badges