title: css background repeat-x, strech-y
body: <p>I have a striped background with a gradient which I want repeated in x and stretched in y. I thought this would work:</p>
  
  <pre><code>background: url(bg.jpg) repeat-x;
  background-size: auto 100%;
  </code></pre>
  
  <p>But it either stretches in y or repeats in x, never both at same time:</p>
  
  <p><img src="https://i.stack.imgur.com/S0sOb.png" alt="enter image description here">
  <a href="http://codepen.io/anon/pen/JCjEb" rel="nofollow noreferrer">http://codepen.io/anon/pen/JCjEb</a></p>
  
  <p><strong>Edit:</strong> Note that I cannot simply repeat in y since the striped background also have a gradient (dark in bottom, lighter at top).</p>