Background gradient that scrolls with content


Hello everyone.

I'm a real newbie, so please bear with me!

I'm trying to create a background gradient that will scroll with the content.

I'm using this code, but when you scroll, the gradient moves down slightly.

To be clear: I have a row with two columns. one of the columns has an

and an

and a

. I want the top of my gradient to be a dividing line between the

and the paragraph below it. It looks wonderful when first viewed, but then the gradient moves as you scroll (and I have to do media queries to align it properly for all the pg breaks.

Here is my css (it's on a wrapper div that extends the full browser width):

wrap {

background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#f6f4f3 0%, white 5%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f6f4f3 0%, white 5%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#f6f4f3 0%, white 5%); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#f6f4f3 0%, white 5%); /* Standard syntax */
background-position: 0 425px; 
background-repeat: no-repeat;