title: Add a overlap between image and background
body: <p>I am having trouble to fix my problem with css.</p>
  
  <p>I have this in my example fiddle <a href="http://jsfiddle.net/JdLp8/" rel="nofollow">http://jsfiddle.net/JdLp8/</a></p>
  
  <pre><code>body {
      background: url("http://subtlepatterns.com/patterns/gray_jean.png");    
      padding:0;
      height:100%; 
      font-family: 'Source Sans Pro', sans-serif;
  }
  
  .side-image {
      background: url("http://www.achtergronden.info/wp-content/uploads/Natuur-Landschap-achtergrond-23.jpg");    
      width: 200px;
      height: 1000px;
      float: right;
   }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="side-image"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What i want is that the image will overlap smoothly into my body background. I want to remove that hard line between them. I have looked at css gradients but i can't get a gradient over the hard line. </p>
  
  <p>What am i doing wrong? Are gradients the solution for this? Or are there other solutions?</p>
  
  <p>Thanks for the help in advance</p>