Reply To: Placing image to align with bg gradient

[drone4four]

Thank you for this helpful guide.

The guide explains that to place the center of the circle gradient in the top left corner, all you have to add is, ‘circle at 0% 0%’. The gradient is then positioned so that the 0% starting point that the gradient emerges from is positioned at the top left corner of the gradient box. By adjusting the values in percent, you can shift the location of the circle. I have achieved success.

As you may have noticed in my updated testcase there, I added:

 background-repeat: no-repeat;
 background-attachment: fixed;

to the body declaration in order to avoid the background from repeating over and over. I like it alot. But what I would like to do next is keep the gradient, but pin it to that top, so that when you scroll down the long form essay (lorem ipsum in the test case linked to below) on my site, the color blue is filled in the background rather than having a red circle staring at you the whole way. I’m trying to keep the circle gradient at the top and the second color to fill in the rest of the background for the remainder of the essay. I’m not sure I am doing a good job explaining. @Beverleyh: Do you know what I am trying to say?

Thanks again for your attention.

edit: grammar correction