Streaming live at 10am (PST)

How to make gradient background (in Body) fixed?


#1

Hello everyone,

Happy to be here. I made my first micro-page in Webflow. But how do I make the background gradient fixed, on top of the fixed background image? Both is in the body-tag.

On small screens the user will have to scroll down, and right now the gradient will scroll with the content. I’d like it to stay fixed.

Any suggestions?

http://mayer-event.webflow.io/


#2

Fixed backgrounds on mobile is disabled in Webflow due to compatibility issues. There is no easy way to get fixed backgrounds on mobile at this time without doing some very complicated things. I’ve given up on this for the time being due to how hard it is to get it to work right. Sorry for the bad news.


#3

Hey @larshartmann
Instead of using a fixed background you can use a Div block with position: fixed

like this:
https://preview.webflow.com/preview/mobile-fixed-bg?utm_source=mobile-fixed-bg&preview=eefc98f235e9d8bec14272a49592c161

live example:
http://mobile-fixed-bg.webflow.io/


#4

Thank you Gilson! That did the job. A big help with the mockup you made. Kudos!

@DFink, check out gilsons answer. That did the trick for me.


#5

You are welcome @larshartmann
we’re here to help, do not hesitate ask for help.

I’m closing the topic since you got the answer.


#6