title: Background image size
body: <p>I'm doing a webpage, with a background image, the site appears fine when it's in full page mode. But when I start re-sizing the browser, the navigation stays the same, but the background-image, becomes too small and there is unwanted white space. 
  What can I do so that background-image conforms to the size of the browser when re-sized?
  Thank you all that help. :)</p>
  
  <pre><code>&lt;html&gt;
  &lt;link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark &amp; Howie Wedding/itinary.css"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;head&gt;
          &lt;body&gt;
              &lt;div class="wrapper"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li class="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="location"&gt;&lt;a href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="itinerary"&gt;&lt;a href="#"&gt;Itinerary&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="photos"&gt;&lt;a href="#"&gt;Howie &amp; Mark&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="sign"&gt;
                  &lt;ul class="mark"&gt;
                      &lt;li&gt;Howard &amp; Mark's wedding beings&lt;/li&gt;&lt;br&gt;
                      &lt;li&gt;We start dancing&lt;/li&gt;&lt;br&gt;
                      &lt;li&gt;Everybody has fun&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/body&gt;
      &lt;/head&gt;
  &lt;/html&gt;
  
  body {
  background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
  background-repeat: no-repeat;);
  background-repeat: no-repeat;
  background-size: cover;
  }
  .wrapper {
      top: 10px;
      height: 175px;
      width: 1100px;  
      background-color: black;
      opacity: 0.8;
      margin: auto;
      border-radius: 10px;
      z-index: 0;
  
  }
  .card {
      display: inline-block;
      width: 700px;
      height: 350px;
      margin: 40px;
      background-color: white;
      border-radius: 20px;
      text-align: center;
  }
  .sign {
      margin: 35px;
      width: 617px;
      height: 267px;
      border: solid black;
      border-radius: 5px;
      font-style: oblique;
      font-weight: 600;
      text-align: center;
  }
  .mark {
      font-size: 35px;
      list-style-type: none;
  }
  ul.nav {
      display: inline;
      color: white;
      text-decoration: none;
      text-align: center;
      padding: 8px 15px;
      border-radius: 5px;
      text-align: auto;
  }
  ul.nav li {
      float: left;
      margin-left: 50px;
  }
  
  ul.nav li.home {
      padding: 35px 15px;
      margin: 20px;
      top: 15px;
      font-weight: 100;
      height: 55px;
      width: 130px;
      font-size: 40px;
  }
  ul.nav li.home:hover {
          background-color: #138f00;
          border-radius: 8px;
  }
  ul.nav li.location {
      padding: 35px 15px;
      margin: 20px;
      font-weight: 100;
      top: 15px;
      height: 55px;
      width: 180px;
      border-radius: 5px;
      font-size: 40px;
  
  }
  ul.nav li.location:hover {
      background-color: #138f00;
      border-radius: 8px;
  }
  ul.nav li.itinerary {
      padding: 35px 15px;
      margin: 20px;
      font-weight: 100;
      height: 55px;
      width: 200px;
      border-radius: 5px;
      font-size: 40px;
  }
  ul.nav li.itinerary:hover {
      background-color: #138f00;
      border-radius: 8px;
  }
  ul.nav li.photos {
      padding: 35px 15px;
      margin: 20px;
      margin-left: 40px;
      font-weight: 120;
      height: 55px;
      width: 250px;
      border-radius: 5px;
      font-size: 40px;
  }
  ul.nav li.photos:hover {
      background-color: #138f00;
      border-radius: 8px;
  }
  ul.nav li a {
      color: #faf3bc;
      display: block;
      text-decoration: none;
  }
  </code></pre>