Как фоновое изображение может вставляться в таблицу ячеек (разрешить искажение)

Question

Я пытаюсь установить фон в виде перекрестного изображения в таблицу ячеек. Изображение позволяет искажать, но не повторять. Когда браузер расширяется, изображение должно также расширяться и в противном случае.

Я пробовал много комбинирования. Установите фоновый размер, чтобы покрыть или содержать, но все еще не работает.

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>

Надеется, что вы, ребята могут помочь. Спасибо.

Answer 1

использование background-size:100% 100%; это поможет

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-repeat: no-repeat; 
 
    background-size:100% 100%; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

Это поможет вам, но изображение растянуть, потому что размер DIV не соответствует изображению.

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>