V.David V.David - 6 months ago 26
CSS Question

Css and c# problems fitting an image on a circle

Im trying to fit a image that comes from the database on that circle as you can see! But if i put a background image on a class via css it fits perfectly

https://i.gyazo.com/cf7f8332acd5967f109f58de6ef1a578.gif

And if i put with asp:image it stops working

https://i.gyazo.com/5c06753b959a698d276e13fd44d90c61.gif

Any ideas?
This is my c# code of the image

<div id="imagemuser" style="display:none">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2 ">
<asp:Image ID="Image1" runat="server" imageurl="http://i.kinja-img.com/gawker-media/image/upload/x1hua0lnuultijaxcafc.jpg"/>
<div class="ch-info" >

<a onclick="$('#email').hide();$('#escolherimag').show();$('#idade').hide();$('#idadeeditar').show();$('#Buttonseditar').show();$('#Buttons').hide();$('#cocktailcriado').hide();$('#biografia').hide();$('#biografiaeditar').show();$('#Nomedoperfil').hide();$('#fechar').show();$('#Nomedouser').hide();$('#Nomedousereditar').show();$('#telefone').hide();$('#telefoneeditar').show();" >
<h3>
Edita aqui
</h3>
<p class="tex">Edite o seu perfil há sua maneira!</p>
</a> </div>
</div>
</li>
</ul>
</div>


And this is the css code that i use for this circle

#imagemuser .ch-grid {
bottom: 50%;
display: inline;
left: 42%;
position: absolute;
width: 15%;
z-index: 10;
}

#imagemuser {

}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}

.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}

.ch-grid:after {
clear: both;
}

.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}

.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}

.ch-img-2 {
background-image: url(https://cdn.meme.am/images/300x/2793196.jpg);
}

.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}



.ch-info p {
color: white;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}

.ch-info p:hover {
color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}

.ch-item:hover .ch-info p {
opacity: 1;
}

Answer

This is one way to do the job, basicly it will make the background image dynamic.

variable = query....
    <div class="ch-item" style="background-image:url(variable); background-position:center; background-size:cover;">
Comments