title: background-image on container element doesnt show all the sections of the container
body: <p>I am new to CSS and learning everyday. I am stuck at understanding something which could be trivial but I am not sure about the right term to research the problem.</p>
  <p>So, I have a container <code>&lt;main&gt;</code> with class &quot;background&quot; inside which there are three sections with class &quot;package&quot; followed by the footer. The sections inside the container are tall enough needing the reader to scroll down to view them all:</p>
  <pre><code>&lt;/header&gt;
      &lt;main class=&quot;background&quot;&gt;
          &lt;section class=&quot;package&quot; id=&quot;plus&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;h1 class=&quot;package__title&quot;&gt;Our PLUS Plan&lt;/h1&gt;
                  &lt;h2 class=&quot;package__subtitle&quot;&gt;The most popular choice of our customers.&lt;/h2&gt;
                  &lt;p class=&quot;package__info&quot;&gt;Benefit from increased storage and faster support to ensure that your mission-critical data and applications
                      are always available!&lt;/p&gt;
              &lt;/a&gt;
          &lt;/section&gt;
          &lt;section class=&quot;package&quot; id=&quot;free&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;h1 class=&quot;package__title&quot;&gt;Our FREE Plan&lt;/h1&gt;
                  &lt;h2 class=&quot;package__subtitle&quot;&gt;An extremely solid start into our hosting world.&lt;/h2&gt;
                  &lt;p class=&quot;package__info&quot;&gt;Get started immediately at zero cost!&lt;/p&gt;
              &lt;/a&gt;
          &lt;/section&gt;
          &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
          &lt;section class=&quot;package&quot; id=&quot;premium&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;h1 class=&quot;package__title&quot;&gt;Our PREMIUM Plan&lt;/h1&gt;
                  &lt;h2 class=&quot;package__subtitle&quot;&gt;All your enterprise needs. Instant support, guaranteed uptime. &lt;/h2&gt;
                  &lt;p class=&quot;package__info&quot;&gt;The best solution for small to large enterprises. Because hosting shouldn't be in the way!&lt;/p&gt;
              &lt;/a&gt;
          &lt;/section&gt;
      &lt;/main&gt;
      &lt;footer class=&quot;main-footer&quot;&gt; .... 
  </code></pre>
  <p>It looks like:</p>
  <p><a href="https://i.stack.imgur.com/jiLiv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jiLiv.gif" alt="enter image description here" /></a></p>
  <p>I wanted a background image to cover the entire page so that it lays behind all the section till when the footer starts. I thought, I could target <code>&lt;main class= &quot;background&quot;&gt;</code> and tried:</p>
  <pre><code>&lt;style&gt;
          .background {
                  background-image: url(&quot;../images/plans-background.jpg&quot;) ;
                  
          }
  </code></pre>
     
  <p>But this doesn't show the last section onwards in the page (even though <code>&lt;main&gt;</code> contains three sections) and the scrollbar disappears.</p>
  <p><a href="https://i.stack.imgur.com/7xubp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7xubp.jpg" alt="enter image description here" /></a></p>
  <p>What is the reason behind this behaviour? I assumed this was happening because of the inherent height of the image so to test it out I created a very tall image (with 5000 px in Photoshop) and tried using the image as background but the same problem persists.</p>