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;