Question

Here is working example:

http://jsfiddle.net/nnrgu/1/

And here i change to background-position:0px -70px and see what’s happening:

http://jsfiddle.net/nnrgu/2/

linear-gradient, it’s gone!

I’m doing it wrong or it’s supposed to work this way?
How to move linear-gradient with background-image together or keep linear-gradient unmovable?

Thanks.

Answer 1

background-position: 0 -70px, 0 0;

does the trick. Since you declare multiple background-images comma-separated, you can declare for each image a single position, also comma-separated.

http://jsfiddle.net/nnrgu/3/

I even prefer the shorthand:

background: <color> image1 position1 repeat1 attachment1, image2 position2 repeat2 attachment2, ... ;

This way it is clear which position/repeat belongs to which image with less characters.

_{Sidenote:When you have 0 as value, just omit the unit.}