title: HTML, CSS: How do I display the image in the whole div without any content
body: <p>Hey there I am building a website! I'm trying to make the <code>background-image</code> to fit the whole <code>div.section</code>. I tried <code>height: 100%; width: 100%;</code> but it did not work. I need some help.</p>
  
  <p>The part of the code which needs to have the background image: </p>
  
  <pre><code>.section {
    background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
    height: 100%;
    width: 100%; 
  }
  </code></pre>
  
  <p>My complete code on JSFiddle: <a href="https://jsfiddle.net/2Lqxqw10/" rel="nofollow">https://jsfiddle.net/2Lqxqw10/</a> (Make sure to make the width of the result maximum) or another link: <a href="https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html" rel="nofollow">https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html</a> </p>
  
  <p>Thank You in Advance!</p>