title: Responsive table background image
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width: 520px;background-image: url(http://wow.zamimg.com/images/wow/tooltip.png);background-size: cover;color:white"&gt;
    &lt;tr align="center" &gt;
      &lt;td&gt;Description1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr align="center" &gt;
      &lt;td&gt;Description2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr align="center" &gt;
      &lt;td&gt;Description3&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the bottom part of the background-image is cropped.</p>
  
  <p>How can I show the whole background-image?</p>