CSS for fit image to table cell with text overlay - html

Question

Can someone one please give me a hand with the CSS for displaying an image as the background of a TD and fitting some text correctly over it.
It seems that for double digits works fine but with a single I am getting some clipping.
CSS:
.bkgImg {
background: url('/Images/circle.png') no-repeat;
background-size:32px 32px;
padding: 6px 8px 6px 8px;
color: white;
}
HTML:
<table>
<tr>
<td class="bkgImg">50</td>
</tr>
</table>
SEE LINK
Fiddle: http://jsfiddle.net/7kM3R/

Answer 1

I've updated your fiddle:
http://jsfiddle.net/7kM3R/7/
Here's full css for your class:
.bkgImg {
background-image: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png");
background-repeat: no-repeat;
background-position: center center;
background-size:32px 32px;
color: white;
width: 32px;
height: 32px;
text-align: center;
vertical-align: middle;
}
Firstly I removed padding.
Then set fixed size for table cell (width&height):
width: 32px;
height: 32px;
and added background position (center)
background-position: center center;

Answer 2

width: 15px;
text-align: center;
Adding these lines to ur css will give you an ans
check the impact in your fiddle which I have updated

Answer 3

Your background image is cutted by the width of your td element. Give your td a fixed width and it will work. Have a look at this fiddle

Answer 4

You can use min-width for <td> like this link.

Answer 5

you only need to set fixed block bkgImg sizes width:32px; height:32px; or change the padding: 6px 11px;
.bkgImg {
width: 32px;
height: 32px;
background: url("http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png") no-repeat;
background-size:32px 32px;
/*padding: 6px 8px 6px 8px;*/
color: white;
text-align:center;
}
DEMO

Answer 6

You need to specifiy width and height
You should avoid use background-image for circle but border-radius
.value {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: orange;
color: white;
}
avoid also to use table for non tabular data

Answer 7

Just change background-size:32px 32px to background-size:100% 100%;
DEMO

Answer 8

You need to set width and height of your element. For example add:
bkgImg {
width:450px;
height:450px;
}
Example:
http://jsfiddle.net/pndz/WFQLC/

Answer 9

Add following css
.value {
width: 30px;
height: 30px;
}