title: Use part of CSS-Sprite as repeated background image
body: <p>I have a <code>div</code> with a width and height of approximately <code>300px</code> each. The background of this <code>div</code> should be filled repeatedly with a smaller image of 8px width and <code>8px</code> height. This smaller image is embedded into a larger sprite image. How can I only use this <code>8x8</code> pixel tile to pave the background?</p>
  
  <p>What I've tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.world {
    width: 300px;
    height: 300px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wcYFjsX3EPV0QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAxklEQVQ4y+2UsQ3CMBBF/0VImYDKFWNQZB28AwOwQ7KOC8agomKCVJ8ituU7GwkhVxFXWT+nF8nvy0JSRFAMye0wqRghxrheTmV+Wx4A9G7BmlpfAi0lswZ0mj2DsiNjLbBx09lRw1oN+m0OAKB7hIQWvFSM43ZY5V7mI88AhB+KZCiZZSiZ9e/RN6BaP1k6MtY2Ry1rPXv01D1yET3qR2ZF+qXX+zMBDJaSuGP1VMXEV/te9q6/G8hV+h2VI2NtrvZn9uzRGzl9Uzsn2uDrAAAAAElFTkSuQmCC') 0 -16px repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="world"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this example code, the shritesheet has a width and height of <code>24px</code> each. It contains 9 differently coloured points, each of which has a diameter of <code>7px</code>.</p>
  
  <p>I want that only one single point is used repeatedly as background for the div. However, in this code, the whole picture is repeated instead beginning at the third row of points.</p>
  
  <blockquote>
    <p><em>Note, this exemplary spritesheet is only an example. The actual spritesheet is a little more complicated. Replacing the spritesheet
    with CSS code is not a solution.</em></p>
  </blockquote>