css - Background image of table row cutting itself into half -

i have table row class named logo attributes

.logo { background: url("img/logo.png") no-repeat left top !important; }

now image on top left on every row, trying accomplish here move image out of table row such half of image in `table , half of outside table.

i changed class

.logo { background: url("img/logo.png") no-repeat -12px top !important; }

and half of image in table row part of image outside table disappears (cant see it).

i have tried using z-index, position properties nothing works. can guide me in right direction on how can required behaviour?

nb: testing in firefix 20.0.1 thanks

i think can achieve this trick: never see background because don't have space show... solution naturally pass set padding in <tr> make padding show background image. but, <tr> gain padding if set display display:block;.

i use code:

.logo {    background:url(whatever.jpg) no-repeat -12px top;    display:block;    padding-left:12px; } 

here's working fiddle.

hope helps!