title: CSS: 'Background-size' and 'background-repeat: repeat' stretch issue
body: <p>I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.</p>
  
  <p>I have a background image that is a 3px x 3px pattern.</p>
  
  <p>I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).</p>
  
  <p>I have this implementation:</p>
  
  <pre><code>.element {
      width: 100%;
      background-image: url('/path/to/pattern.png');
      background-repeat: repeat;
  } 
  </code></pre>
  
  <p>which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:</p>
  
  <pre><code>.element {
      width: 100%;
      background-image: url('/path/to/pattern.png');
      background-repeat: repeat;
      background-size: 100% 50%;
  } 
  </code></pre>
  
  <p>However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.</p>
  
  <p>Is there any way to simply accomplish this?</p>
  
  <p>Thanks</p>