Internet explorer <td> background image only shows where there's content

Question

First time, long time here.

I have an issue with a cells's background image. It works perfectly fine in Chrome and Firefox. However, my issue presents itself when using IE only.

In IE, it will only show the background image where there is content in the cell. For example, if text only fills half the cell, the background will only show half way down the cell. I need it show the full background regardless if there is content in there or not. Thanks in advance for any assistance.

Here is my CSS:

.game{
    width: 40%;
    max-width: 40%;
    min-width: 40%;
    display: block;
    position: relative;
}


.game:after {
  content: "";
  background-image: url('image.jpg') !important;
  opacity: 0.45;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 1

The empty-cells property should help here:

The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.

So add empty-cells: show; for your table cell elements.