title: Modifying CSS background-position by increment via javascript
body: <p>Whereas I have plenty of experience with PHP coding, I am pretty new to using javascript so I hope this question doesn't come off as stupid.</p>
  
  <p>My goal here is to create a button that when pressed causes the background-position in a defined DIV object to alter its background-position by one pixel.</p>
  
  <p>I've been doing a lot of searching on Google as well as this site in particular and following the tips I have found I've been playing around with the javascript functions a lot but I can't seem to get one that works the way I need it.</p>
  
  <p>My current incarnation looks like this:</p>
  
  <pre><code>&lt;SCRIPT TYPE="text/javascript"&gt;
  var xObject = 0; // Global
  
  function xMinus(ele) {
      xObject-=1;
      document.getElementById(ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
  }
  &lt;/SCRIPT&gt;
  </code></pre>
  
  <p>Where the goal is upon clicking the button (containing onclick="javascript:xMinus('divID');" ) the background should shift to the left by one pixel.</p>
  
  <p>However currently when I click it, Error Console gives me "Error: document.getElementById(ele).css is not a function".</p>
  
  <p>I've tried a few different variations but always get similar results, or "Variable is not defined". Clearly I have no idea what I am doing. Please help! I am coding this for friends and do not want to keep them waiting too long.</p>