Sebbe Berglönn Sebbe Berglönn - 2 months ago 16
HTML Question

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

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

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.