CSS looks different in Firefox than Google Chrome, what can I do?

Question

For fun, I am doing a table with two cells in each row. And I want the cells in the first row to have the same picture, so I wrote in CSS:

tr:nth-child(1){
background-image:url("cat.jpg");
background-size:cover;
border-radius:10px;
}

And my HTML code looks like this:

<tr>
  <td>Ruta 1</td>
  <td>Ruta 2</td>
</tr>
<tr>
  <td>Ruta 3</td>
  <td>Ruta 4</td>
</tr>

So, you should have the same picture on each cell, which I have in Google Chrome. But when I use this in Firefox, I get the same picture over two cells.

Google Chrome , and Firefox .

Any clue of what this is about? Can I write something in my CSS do make it work for Firefox. thanks in advance!

Answer 1

In firefox don't set background-image or color in tr, It will make problems. Instead add to td.

tr:nth-child(1) td{background-image:url("cat.jpg");}

Answer 2

Apply background to cells - <td> and not to rows - <tr> .

tr:nth-child(1) td {
    background-image:url("cat.jpg");
    background-size:cover;
    border-radius:10px;
}

You want each cell to have its own picture, not each row .