title: CSS Parallax image issues with image cutting off
body: <p>Having issues on this site (<a href="http://rvwinvesting.com/2016/" rel="nofollow">http://rvwinvesting.com/2016/</a>) where I have two parallax images.One is a seamless background in the middle and the other is a photo of a series of offices buildings near the footer on the bottom of the page. That's the issue. When you scroll up, the too and bottom of the page appears so it looks odd instead of one scrolling image. Is there some way I can clear this up? The image is over 1200px in height  and the div is only 600px and I've tried smaller div sizes as well and no matter what, that seam appears. Here's my CSS for that div:</p>
  
  <pre><code>#building {
      background: url(http://rvwinvesting.com/2014/wp-content/uploads/2014/09/rvw-building.jpg) 50% 0 fixed;
      height: 600px;
      -webkit-background-size: cover!important;
      -moz-background-size: cover!important;
      -o-background-size: cover!important;
      background-size: cover!important;
   }
  </code></pre>
  
  <p>Tried100%100% for background-size but that just stretches the photo. No good.</p>