# How to ease in a background color **URL:** \ **Category:** How do I?\ **Created:** [March 3, 2024, 5:24pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394 "2024-03-03T17:24:56Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)\ **Post date:** [March 3, 2024, 5:24pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/1 "2024-03-03T17:24:56Z")
Hi there, my header should be transparent until the user scrolls down to 100. Then it should ease in to change color. I have create a state which chances the background color after context.screen?.[‘scroll’]?.[‘y’]\>100. This works fine. But how do I get to ease in the background color? I have tried with the transition parameter but nothing changed. Please advise. Thank you and best regards, Jörg ---
**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\ **Post date:** [March 3, 2024, 10:42pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/2 "2024-03-03T22:42:34Z")
Can you show more of what you’ve tried and what result you are getting? A video can show a lot in just a few minutes. ---
**Author:** ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)\ **Post date:** [March 4, 2024, 1:50pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/3 "2024-03-04T13:50:10Z")
Thanks for picking this up, raydeck, you can check out the current page behavior by scrolling down at [https://www.avgs.haus/](https://www.avgs.haus/) Here is the definition of the state ‘scrolled’ ![Screenshot 2024-03-04 at 14.33.40](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/41171ba5f11abce5bbf10efac12d0a83c302ba5f.png) ![Screenshot 2024-03-04 at 14.34.01](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9d42f2c41b54a55b7a4222b3f7c6b34ae399bad4.png) And here are the parameter for the transition. I have tried ‘all’ for the property as well. So difference ☹ ![Screenshot 2024-03-04 at 14.34.27](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/224c117cfa4e77bb6a273b2e6e5eee3f1540afa8.png) Hope this helps, otherwise pleas elet me know what you need. Thank you and best regards, Jörg ---
**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\ **Post date:** [March 4, 2024, 4:30pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/4 "2024-03-04T16:30:11Z")
Looking under the covers via devtools, the transition is set on the child div while the parent is changing. I made a short video illustrating the phenomenon: > **[Targeting the right div in weweb - Descript](https://share.descript.com/view/c7PEMvFYp98)** > >  Hey, so this is a really interesting problem you presented. Um, so this is, this is your site. Um, and if I scroll, you can see how eventually this, this white comes straight on in, right. And you, a ---
**Author:** ![Joerg](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joerg/32/4462_2.png) [@Joerg](https://community.weweb.io/u/Joerg)\ **Post date:** [March 5, 2024, 4:47pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/5 "2024-03-05T16:47:23Z")
Thanks, raydeck, your video made me realise and fix the issue. Now I change the background of the first container in the section and not the section itself 🙂 Thank you and best regards, Jörg ---
**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\ **Post date:** [March 5, 2024, 5:17pm UTC](https://community.weweb.io/t/how-to-ease-in-a-background-color/7394/6 "2024-03-05T17:17:11Z")
Wonderful! Love the hard puzzles. We tackle questions like this every day in [State Change office hours](https://statechange.ai). The low-code aspects of weweb come up often, and we make progress together!