Last post Feb 10, 2016 02:31 PM by sudip_inn
Feb 10, 2016 12:57 PM|sudip_inn|LINK
i have to show text with circle background or image with circle background.
how to achieve this with css.
got some relevant link http://jsfiddle.net/q1eqq36u/2/
screen shot and sample image showing style
also like to know how could i show text with circle background?
Feb 10, 2016 01:18 PM|Rion Williams|LINK
The border-radius approach is usually the most common (e.g. using a CSS style that has a border-radius set to 50%) for images and other block-level elements like <div>s. Text masking on the other hand is going to be quite a bit trickier as mentioned in the
clip-masking link that you provided :
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
which when used in an example like this one, would yield the following:
Feb 10, 2016 01:31 PM|sudip_inn|LINK
border radius works fine in all browser......specially in lower version of browser ?
text-circle link is not giving right output here is one fiddle
looking for good help. thanks
Feb 10, 2016 02:31 PM|sudip_inn|LINK
showing text with circle background i have done this way.
here is updated fiddle link
full code example
<div class="circle avatar-text text-center thumb bg-7">T</div>
border-radius: 50% !important;
background-size: 100% auto;
but still text inside circle not at center..........can u tell me what to add to position text at center of circle. thanks