I want to set a `background-image` but with an specific distance between the repetitions.

For example, I have this image to become a `background-image`:

![enter image description here](https://i.stack.imgur.com/xuWP9.png)

And I want to fix the repetitions in a pattern like this:

![enter image description here](https://i.stack.imgur.com/cNFNo.png)

Check the [JSFiddle playground](http://jsfiddle.net/fguillen/wgRAM/)

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.