title: Responsive LESS/CSS line gradient background
body: <p>Because I find it challanging creating static image backgrounds, such as example below, that are responsive and covers different resolutions and heights/widths, I was thinking using CSS3 color gradients to reproduce the same background and make it streching dynamically.</p>
  
  <p>I would appriciate any input on tools/tips&amp;tricks/etc on how to recreate such background with CSS. I have looked at online tools for generating CSS rules, such as <a href="http://www.css3factory.com/linear-gradients" rel="nofollow noreferrer">http://www.css3factory.com/linear-gradients</a>, but these doesn't create sharp line between two colors such as in my example.</p>
  
  <p><img src="https://i.stack.imgur.com/qR0Wq.jpg" alt="Example background"></p>