title: Set background-position with 9 rectangles on picture
body: <p><img src="https://i.stack.imgur.com/cCqO8.jpg" alt="example: two different images &quot;splitted&quot; into 9 equal pieces"></p>
  
  <p>Hello community,</p>
  
  <p>First of all, excuse my bad Paint skills ;)</p>
  
  <p>The idea is to choose one of those 9 equal rectangles for a background-position in CSS.
  The uploader of the image should have the opportunity to set the background-position to where the motive is.</p>
  
  <p>For example: in the left image, there would be a butterfly in the top right corner of the image. So he/she would click on the top right rectangle to "mark" the "anchor" for the background-position of this picture. This is neccesary due to very big images for fullscreen-backgrounds. If the user looks at the webseite on a mobile phone, the butterfly should always be there. Thats why I started to create this rectangles.</p>
  
  <p>My question is: How can I do this?</p>
  
  <p>Some ideas:</p>
  
  <ul>
  <li>create one DIV container and put the image as a background</li>
  <li>create 9 smaller divs, each 33,3% wide and 33,3% high</li>
  <li>give each div a property by which jQuery can access the value (e.g. "top-left" or "center-center") and store the value in a database</li>
  <li>the change (jQuery onClick) should be set immediately after the click on the image. This means, the uploader should have a little preview.</li>
  </ul>
  
  <p>There's one website which dowes almost the thing i want to have, but only with 3 different "rectangles" (top, center, bottom): <a href="http://vegas.jaysalvat.com/documentation/background/" rel="nofollow noreferrer">http://vegas.jaysalvat.com/documentation/background/</a></p>
  
  <p>I don't want you to give me a full sample code, I just would like to know how "clean" this solution would be or any hints.</p>
  
  <p>Thanks a lot.</p>
  
  <p>Chris</p>
  
  <p>EDIT: For better explanation here a real example:</p>
  
  <p><img src="https://i.stack.imgur.com/XXbtJ.jpg" alt="example"></p>
  
  <p>As you can see, the motive is in the top right corner of the image. When I click on the top right rectangle, the background-position of this image should be set to (in CSS):</p>
  
  <pre><code>background-position: top right;
  </code></pre>
  
  <p>This action helps to set the background position for mobile devices or tablets, because the image is way bigger than the display of those devices. <a href="http://vegas.jaysalvat.com/documentation/background/" rel="nofollow noreferrer">Please check the URL above</a> and check the small image on the right side (you may have to scroll down a bit.) Hover the image with your mouse and click on one of the 3 rectangles. </p>