Responsive table background image

Question

I need a responsive table background-image. My problem is that the height needs to be flexible, depends how much information is inside. I made it like this:

body {
  background-color: black;
}

<table style="width: 520px;background-image: url(http://wow.zamimg.com/images/wow/tooltip.png);background-size: cover;color:white">
  <tr align="center" >
    <td>Description1</td>
  </tr>
  <tr align="center" >
    <td>Description2</td>
  </tr>
  <tr align="center" >
    <td>Description3</td>
  </tr>
</table>

The problem is that the bottom part of the background-image is cropped.

How can I show the whole background-image?

Answer 1

You can set the background-size to 100% 100%, which stretches the image to fit the element.

BUT, you will run into trouble with your image, because you want to see the borders around the table, which will not work, until the table has a specific minimum height. This happens, because the height is too low to actually show the tiny border, for example: you have an image of 100px height (where the border is 1px), and want to put it into a table of 25px height. This means the border would have only 0.25px, which no monitor can display, why it is not shown. (I hope I could clarify the problem :-) )

A workaround would be to give the table a border by css.

I worked with another example image to demonstrate that background-size: 100% 100% works

body {
  background-color: black;
}

.bg {
  width: 520px;
  background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-1.jpg);
  background-size:100% 100%;
  color:white;
}

<table class="bg">
 <tr align="center" ><td>Description1</td>
</tr>
 <tr align="center" ><td>Description2</td>
</tr>
 <tr align="center" ><td>Description3</td>
</tr>
</table>