The design I have is a single page but spans probably 4 viewports in height (desktop) the background I’m trying to achieve is a gradient that goes from blue to white and back to blue, the issue is the background stops completely after 100vh is met and then repeats. How do I have it one fluid background?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Matthew,
Can you please share a read only link to your website? This should be easily achieved, but we need to see your structure to advise.
Hi Alex
here’s the link, it’s more of a sandbox where i’m trying to learn the ropes of webflow than an actual website but you can clearly see the issue i am talking about.
https://preview.webflow.com/preview/uhn-55b41a?utm_medium=preview_link&utm_source=designer&utm_content=uhn-55b41a&preview=26f9a6977e8f6e6c3aa4da5d17e66869&workflow=preview
Start by removing styling from the body.
You’ll place a new div. Position = fixed + full.
Apply your gradient
Make sure your content parent(s) have a z-index higher than the gradient background.
Hey thanks for the help, it works perfectly except that it is position fixed and does not scroll with the page, I would think absolute with top 0 bottom 0 would do the trick but it does not 
I can manually set the height to the height of the document but that seems a bit hacky and non responsive.
Ah, I misunderstood what you were going for. For the gradient to span all of your content take all positioning styles off of the gradient div. You can remove all height styling and leave at “auto”. Then place all of your page content and nav inside of that gradient div.
It worked!!! Thank you so much!!
