title: Cover body with background image
body: <p>I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!</p>
  
  <p>This is my HTML and JS code that I have written so far.</p>
  
  <pre><code>&lt;!DOCTYTPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;/head&gt;
      &lt;body class="menu menu-open"&gt;
          &lt;header&gt;
              &lt;a href="#" class="menu-toggle"&gt;Menu&lt;/a&gt;
              &lt;nav class="menu-side"&gt;
                  This is a side menu
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              (function() {
                  var body = $('body');
                  $('.menu-toggle') .bind('click', function(){
                  body.toggleClass('menu-open');
                  return false;
                  });
              })();
  
              $(document).ready(function(){
  
                 $(".menu").css({"height":$(window).height() + "px"});
  
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my CSS.</p>
  
  <pre><code>.menu{
      overflow-x: hidden;
      position: relative;
      left:0;
  }
  
  .menu-open{
      left:231px;
  
  }
  
  .menu-open .menu-side{
      left: 0;
  }
  
  .menu-side, 
  .menu{
      -webkit-transition: left 0.2s ease;
      -moz-transition: left 0.2s ease;
      transition: left 0.2s ease;
  }
  
  .menu-side{
      background-color: #333;
      border-right: 1px solid #000;
      color: #fff;
      position: fixed;
      top: 0;
      left:-231px;
      width: 210px;
      height: 100%;
      padding: 10px;
  }
  
  .menu-toggle{
      z-index: 1;
  }
  </code></pre>