Necesito hacer algo como esto. y quiero hacerlo para un <div></div>
que tiene width
en %
.
Puedo hacerlo usando una imagen y añadiendo otro div
dentro y z-index
.
Pero quiero saber si it's posible hacer en este círculo en backgroud utilizando css.
Se puede hacer usando la propiedad border-radius
. Básicamente, necesitas establecer el border-radius exactamente a la mitad de la altura y la anchura para obtener un círculo.
[JSFiddle][1]
HTML
<div id="container">
<div id="inner">
</div>
</div>
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%;
}
Puedes usar las pseudo-clases :before
y :after
para poner un fondo multicapa en un elemento.
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}