title: background color which is 50% of the height of the window CSS
body: <p>Trying to achieve a background on a page that is "split in two"; two colors on opposite sides, do this with linear-gradient but if some element(div) large height background color repeat</p>
  
  <pre><code>&lt;body&gt;
   &lt;div class="blocktest"&gt;
    test
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css :</p>
  
  <pre><code>body {
    background-image: linear-gradient(#000 50%, #ffffff 0%);
    height:100vh;
  }
  .blocktest {
    height:1500px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/aq9Laaew/230190/" rel="nofollow noreferrer">demo</a></p>
  
  <p>I want 50% of the page color1 and the rest of the page color is color2</p>