How to fit background-image in td

Question

I am trying to put a background image in a table cell (td) but since the image is larger than the cell I can see only a part of the background image.

The html looks like this:

<tr>
  <td class="active"></td>
  <td class="passive"></td>
</tr>

in the classes I am using this css:

background-image: url('../Images/prospectAct.png');
width: 100%;
height: auto;

The <td> are 8% width and I can make the image fit the cell. Any example that I can test?

Answer 1

You can use background-size:contain;

td {
  width:100px;
  height:100px;
}
  td.active {
    background-image:url('http://placehold.it/200x200');
    background-size:contain;
  }

<table>
  <tr>
    <td class="active"></td>
    <td class="passive"></td>
  </tr>
</table>