CODEWITHSUNDEEP
htmlcss
Plamen Rashkov
Plamen Rashkov

Reputation: 21

how to do a gradient background that is not fixed and changes on scroll(css)

So I want to do a gradient background, that do change on scroll - I mean I want to make it look like this:

top of the page before scrolling:

top of the page before scrolling

bottom of the page after scrolling:

bottom of the page after scrolling

I use this code now:

background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255), rgba(237, 255, 188, 0.5));
background-repeat: no-repeat;
background-attachment: fixed;

but it doesn't work - it stays fixed and no matter where on the page I am, background color stays the same.

Upvotes: 0

Views: 1057

Answers (2)

Plamen Rashkov
Plamen Rashkov

Reputation: 21

i found an answer - hope it helps for the others too..

(so your suggestions(all of them) do not work! It breaks the background if i change this property, cos the page is long. The only way i could make it work was with property height set on auto.

height:auto;

this fixed my problem.

Upvotes: 0

K K
K K

Reputation: 18099

Change background-attachment:fixed to background-attachment:scroll

Demo : http://jsfiddle.net/lotusgodkk/GCu2D/2187/

Upvotes: 1

Related Questions