CSS gradient at pixel location (not %)

Question

How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?

Here's the issue- I've got an image set as background-image - 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.

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 background-position that starts at 1780px.

This works, but I really want to get away from the 1px image trick. Any ideas?

<div id="photobg">
 <div id="gradientbg">
 </div>
</div>

#photobg {
 background-image:url('photourl.jpg');
}

#gradientbg {
 background-image:url('1pxgradient.jpg');
 background-repeat: repeat-y;
 background-position: 1780px 0;
 height: 100%;
}

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.

Reference: CSS 3 Gradient n pixels from bottom - Webkit/Safari

Answer 1

No, you can use pixels with linear gradient:

background-image: linear-gradient(transparent 1780px, black 100%);

You can also combine this gradient with multiple background images on one div.

You might want to check out this jsbin, I've made for you: http://jsbin.com/sonewa/1/edit