Ошибка таблицы HTML с фоновым изображением при изменении размера браузера

Question

table {
  border-collapse: collapse;
}

table td {
  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');
}

#main {
  width: 200px;
  margin: auto;
  border: 1px solid red;
}

<div id="main">
  <table>
     <tr>
       <td>d</td>
       <td>a</td>
       <td>m</td>
       <td>n</td>
       <td>b</td>
       <td>u</td>
       <td>g</td>
    </tr>
  </table>
</div>

У меня есть простая таблица с фоновым изображением для TD в центрированном div. Когда я изменю ширину окна браузера с помощью мыши (Chrome, Opera), между TD появляются пробелы.

Как я могу это решить?

Пример: http://jsfiddle.net/gauh9s7t/

Видео: https://www.youtube.com/watch?v=V4h5bEOS3jE

Answer 1

Вы можете исправить это, добавив свойство background-repeat :

table td {
  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');
  background-repeat: no-repeat;
}

http://jsfiddle.net/gauh9s7t/10/

Answer 2

Это не ошибка, это касается вашего фонового изображения:

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

Если вы замените это свойство на цвет фона, все тд из вашей таблицы будут в порядке.