Why is this table row background image disappearing behind the table cell?

Question

This has me stumped. I'm setting a background image on a tr. For some reason it disappears at the 4th column. Even stranger, the column it disappears behind depends on the width of the table.

I'm pretty sure I'm missing something dead obvious.

Edit: this does not happen with background-repeat: repeat;.
Edit2: added a 100% width sample to demonstrate that this has nothing to do with the actual table width.
Edit3: Just checked in a couple of browsers. This only happens in Chrome and Opera. Firefox and Edge are unaffected. So Bug?

Can anybody explain this?

.data-table {
  width: 600px;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-position: 200px -50px;
  background-repeat: no-repeat;
}

tr, td {
  background-color: transparent;
  height: 100px
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

.data-table {
  width: 100%;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-position: 300px -50px;
  background-repeat: no-repeat;
}

tr, td {
  background-color: transparent;
  height: 100px
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

https://codepen.io/franatec/pen/yLeeKzr?editors=1100

Weird, this was new to me as well. Here are some possible solutions https://stackoverflow.com/questions/25312482/background-image-on-tr — Ted Whitehead, Jun 10 '20 at 15:36
@Ted Whitehead, comment on that post says "W3C says you cannot place a background image on a tag" which may explain it, although I haven't been able to find an actual reference at w3schools or Mozilla docs. I may consider the div hack. Just wish I understood where this behavior is coming from. — Francois Carstens, Jun 10 '20 at 15:44
@j08691, I'm expecting the background image to be visible regardless of it's position in the row. — Francois Carstens, Jun 10 '20 at 15:45
But you're limiting the width of the table and the cell isn't wide enough to display it, so it gets cut off — j08691, Jun 10 '20 at 15:48
@j08691, check again. That's not what's happening at all. At 100% width it's still cropped. `background-repeat` is not cropped but fills the entire width. After some digging I'm seeing this in Chrome and Opera only, not FF or Edge, so I'm guessing it's a bug. — Francois Carstens, Jun 10 '20 at 16:01
@TedWhitehead, this appears to be a bug. I've submitted a report to chromium.org. — Francois Carstens, Jun 10 '20 at 16:47

score 1 · Answer 1 · answered Jun 10 '20 at 17:47

If I get it right you want an image behind your tr, you can add background-size: cover to fix this issues but it looks weird!

.data-table {
  width: 600px;
}

tr.ticket-rows {
  background-image: url('https://media.tenor.com/images/6b7cfb462a7f171e6b1aca63fd5c0173/tenor.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

tr, td {
  background-color: transparent;
  height: 100px;
}

<table class="data-table">
  <tbody>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr class="ticket-rows">
      <td><input type="checkbox" value="on"></td>
      <td><a href="http://example.com/3589">3589</a></td>
      <td>John Smith</td>
      <td>New</td>
      <td>1</td>
      <td>Medium</td>
      <td></td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · answered Jun 12 '20 at 13:00

This is a bug in Chromium and has been added to the issue list. https://bugs.chromium.org/p/chromium/issues/detail?id=1093390#c5

@AliKianoor provides a possible, but not perfect workaround. An alternative workaround would be do use a full size image so background-repeat: repeat can be used without side effects. Neither of these are optimal.

Why is this table row background image disappearing behind the table cell?

2 Answers2