title: How to set background-image to take remaining section of the page in semantic-ui
body: <p>I am trying to set a background-image in my content area. HTML pages containes 3 main section. Header, Content and Footer. So I am use following code for this. Content is not displaying the whole background image rather it is displaying according to the content inside it. How can this content take the whole remaining space. I am new to css and front-end framework.</p>
  
  <p>Here is the code.</p>
  
  <pre><code>&lt;div class="ui container"&gt;
      &lt;div class="ui large secondary inverted menu"&gt;
              &lt;div class="item"&gt;
                  Our Company
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui landing-image fluid container"&gt;
  
          &lt;h1 class="ui inverted header"&gt;Hello&lt;/h1&gt;
  
      &lt;/div&gt;
      &lt;div class="ui inverted vertical footer segment"&gt;
  
          &lt;div class="ui container"&gt;
              Footer
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.landing-image {
    background-image: url("/assets/images/black.png") !important;
    background-size: cover !important;
  }
  </code></pre>
  
  <p>Here is the working pen. <a href="http://codepen.io/next1/pen/WxLRPv" rel="nofollow">http://codepen.io/next1/pen/WxLRPv</a></p>