title: Two Solid Color Background at a Fixed Position
body: <p>I've been trying to look around as I know there are a lot of questions, tutorials, tools to achieve a two solid background but the problem is that I can't achieve a simple design.</p>
  
  <p>My Layout: <a href="http://i.stack.imgur.com/b4qO7.jpg" rel="nofollow">http://i.stack.imgur.com/b4qO7.jpg</a></p>
  
  <p><strong>What I exactly can't achieve:</strong></p>
  
  <ol>
  <li><p>Having the grey color start at the middle of the first box no matter what the resolution is and I'm unable to do that with the Gradient tool.</p></li>
  <li><p>Make that shadow like effect disappear when I apply it using CSS.</p></li>
  </ol>
  
  <p><strong>Here's what I achieved so far:</strong></p>
  
  <pre><code>  background: -webkit-linear-gradient(top, white 0, White 370px, white 301px, #818285 301px, #818285 300px, #818285 100%) no-repeat;
  </code></pre>
  
  <p>I hope you can look at my question as different not as a duplicate because I've been looking for a while with no success to find a similar case.</p>