title: CSS gradient at pixel location (not %)
body: <p>How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?</p>
  
  <p>Here's the issue- I've got an image set as <code>background-image</code> - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black. </p>
  
  <p>So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a <code>background-position</code> that starts at 1780px. </p>
  
  <p>This works, but I really want to get away from the 1px image trick. Any ideas?</p>
  
  <pre><code>&lt;div id="photobg"&gt;
   &lt;div id="gradientbg"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  #photobg {
   background-image:url('photourl.jpg');
  }
  
  #gradientbg {
   background-image:url('1pxgradient.jpg');
   background-repeat: repeat-y;
   background-position: 1780px 0;
   height: 100%;
  }
  </code></pre>
  
  <p>What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.</p>
  
  <p>Reference: 
  <a href="https://stackoverflow.com/questions/4707828/css-3-gradient-n-pixels-from-bottom-webkit-safari">CSS 3 Gradient n pixels from bottom - Webkit/Safari</a></p>