title: how to add background image to a grid cell?
body: <p>I am trying to add background image to a grid cell (a div element) which comes in a display:grid container (a section element) . I am trying background-image: url("background.png") but it is not working. I don't know why. I have tried and checked multiple times but of no use. Need some help here
  Thanks in advance</p>
  
  <p>Here is the HTML and CSS Code:</p>
  
  <pre><code>&lt;!doctype HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
    &lt;link rel="icon" type="image/png" href="images/fav.ico" sizes="32x32" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;section id="the-grid"&gt;
    &lt;div id="header"&gt;
        Welcome
    &lt;/div&gt;
  
    &lt;div id="nav"&gt;
      Navigation
    &lt;/div&gt;
  
    &lt;div id="main"&gt;
      Main Content
    &lt;/div&gt;
  
    &lt;div id="footer"&gt;
      Footer
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /*Root Elements and Border Box Fix*/
  html {
    height: 100;
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  body{
    font-family: "segoe ui", helvetica;
    margin: 0;
  }
  #the-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
    "header header header header header"
    "nav main main main main"
    "nav main main main main"
    "nav main main main main"
    "nav main main main main"
    "footer footer footer footer footer";
  }
  
  /* Grid Cells */
  #header{
    background-image: url("nav.png");
    grid-area: header;
    text-align: center;
  }
  #nav{
    grid-area: nav;
  }
  #main{
    grid-area: main;
  }
  #footer{
    grid-area: footer;
    text-align: center;
  }
  </code></pre>