title: CSS, background-repeat distance
body: <p>I want to set a <code>background-image</code> but with an specific distance between the repetitions.</p>
  
  <p>For example, I have this image to become a <code>background-image</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/xuWP9.png" alt="enter image description here"></p>
  
  <p>And I want to fix the repetitions in a pattern like this:</p>
  
  <p><img src="https://i.stack.imgur.com/cNFNo.png" alt="enter image description here"></p>
  
  <p>Check the <a href="http://jsfiddle.net/fguillen/wgRAM/" rel="noreferrer">JSFiddle playground</a></p>
  
  <p>I'm looking for a CSS3 clean solution, not JS, not extra elements, and so forth. If I have to use very modern CSS3 (un-supported) tricks is ok.</p>