title: CSS looks different in Firefox than Google Chrome, what can I do?
body: <p>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:</p>
  
  <pre><code>tr:nth-child(1){
  background-image:url("cat.jpg");
  background-size:cover;
  border-radius:10px;
  }
  </code></pre>
  
  <p>And my HTML code looks like this:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;Ruta 1&lt;/td&gt;
    &lt;td&gt;Ruta 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Ruta 3&lt;/td&gt;
    &lt;td&gt;Ruta 4&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://gyazo.com/8b409cf1fc70f102f8a9b95788d014d3" rel="nofollow">Google Chrome</a>, and <a href="https://gyazo.com/882c1ffc0be132aee43789132e59ac58" rel="nofollow">Firefox</a>.</p>
  
  <p>Any clue of what this is about? Can I write something in my CSS do make it work for Firefox. thanks in advance!</p>