Streaming live at 10am (PST)

Background gradient colour does not span entire page


Please see the attached screenshot. The background gradient color that I applied does not cover the entire page. I get a black color section at the bottom - I didn’t apply this black color and I have not yet inserted a footer section.

How can I get the background gradient color (navy color) to span the whole page.? Thanks.

Hi @ronalessi

Good question, but we would need more info to help you, can you share your preview link and publish link ?

From the screenshot only, my guess would be wherever you have applied the gradient (maybe ‘body’ or a ‘section’) needs a height of 100vh ?


Hi @StuM

I inserted more containers just to see whether the bottom is completely black. The image below shows that the gradient is repeating itself - the black color is just a portion of the gradient.

Is there any way to have the gradient not repeat itself - the toggle repeating switch if off btw.

Are you able to share the preview link?

Looks like you’ve added it to a body element, that seems to stop at 100vh and then repeat.

I’ve just tested a theory out, and rather than add gradient to the body element, add a section and make it for example 2000px, then add a gradient background - that stretches the gradient all the way down 2000px.

Hope that helps


Hi @StuM

Is it possible to share the preview with you in a private way?

That being said, I think basically when the gradient angle was 180 it was doing that, when I changed the gradient angle to 270 and it is no longer doing that. Hmm…I guess if this is how it is supposed to work, then this topic can be marked as answered? Not sure.

Sure, you can ‘message’ instead…

Or try my other solution - I updated my last reply just as your reply arrived!


This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.