title: Fitting & Resizing Photo within Portion of Screen
body: <p>I'm new to HTML/CSS, and I'm currently working on a project where I have a vertical menu. When I try to fit my full-size background image, it extends the width of the screen so I need to scroll for it. I need to cover the remainder of the white-space on the page, but without having this happen. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Ryan Gross: Web Dev. &lt;/title&gt;
          &lt;style type="text/css"&gt;
              .container {
              }
              body {
                  margin:0;
                  padding:0;
                  font-family:"Verdana";
                  overflow:auto;
              }
              #menu_background {
                  float:left;
                  background-color:#272727;
                  width:200px;
                  height:100%;
                  position:fixed;
              }
              #side_menu {
                  list-style-type:none;
                  font-size:1.3em;
                  width:200px;
                  padding:0px;
                  margin-top:260px;
                  font-family:"Verdana";
                  text-align:center;
              }
              #side_menu li a {
                  display:block;
                  text-decoration:none;
                  color:#E6E6E6;
                  padding:8px 0px 8px 0px;
              }
              #side_menu li a:hover {
                  background-color:#585858;
              }
              #contact_info {
                  float:left;
                  margin:120px 0px 0px 20px;
                  padding:0;
                  color:#E6E6E6;
                  list-style-type:none;
                  font-size:.9em;
              }
              #contact_info li {
                  padding:2px 0px 2px 0px;
              }
              #image {
                  float:left;
                  width:100%;
                  height:100%;
                  background-size:cover;
                  background-image:url("example.jpg");
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;  
      &lt;div class="container"&gt;
          &lt;div id="menu_background"&gt; 
              &lt;ul id="side_menu"&gt;
                  &lt;li&gt; &lt;a href="about.html"&gt;  About &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="skills.html"&gt;  Skills &lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href="projects.html"&gt;  Projects &lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href="resume.html"&gt; Resume &lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="image"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>