title: Trying to make a background color block reach the top and bottom of the screen
body: <p>I have a background image on my page, I'm trying to place a color block that goes behind all my content but leaves the background image visible in the margins. </p>
  
  <p>How do I get it to reach the top and bottom of the page?</p>
  
  <p>I've placed a <code>&lt;div&gt;</code> tag around all my content excepting the logo image in the corner like so (please let me know if anything is unclear):</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Services&lt;/title&gt;
  &lt;link href="Coppermug Stylesheet Services.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
  
      &lt;div&gt;
          &lt;a class="home-logo" href="EXAMPLE.html"&gt;&lt;img src="EXAMPLE" id=bannerlogo&gt;&lt;/a&gt;
       &lt;/div&gt;
  
      &lt;div class="white-background"&gt;
      &lt;div class="navbar" id="navbarSupportedContent"&gt;
  &lt;ul class="navbar-nav"&gt;
  &lt;li class="nav-item active"&gt;
    &lt;a class="nav-link" href="EXAMPLE.html"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="EXAMPLE.html"&gt;Services&lt;/a&gt;
  &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="EXAMPLE.html"&gt;About Us&lt;/a&gt;
            &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="EXAMPLE.html"&gt;Contact&lt;/a&gt;
  &lt;/li&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  
  html {
      background-image: url("../Final Logo Assets/Minimized/Blur Mug-min Opacity-min.jpg");
      background-repeat: no-repeat;
    background-size: cover;
  }   
  
  
  .white-background {
      background-color: #FFFFFF; 
      margin-right: 20%;
      margin-left: 20%;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GYK5E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYK5E.jpg" alt="enter image description here"></a></p>