[SOLVED] Why is linear gradient repeating??

Question

I've experienced this problem a many times; whenever I try to add a linear gradient starting from top to bottom or vice-versa, it starts repeating. I want to display only the colors in linear gradient smoothly at one time on the screen but why are they repeating in blocks here? They look so annoying.How to get a rid of this?

And I've observed that if I add the degree of the gradient as 90 degree and 270 degree, they work smoothly on the background. But what is wrong with 180 and 360 deg?? 🤔

Can somebody please explain?

See this 👇
https://code.sololearn.com/WFZ5euw09666/?ref=app

Answer 1

You could try min-height: 100vh; to make sure the body covers the full screen

Answer 2

repeat is the default

with
background-repeat: no-repeat;
it will not repeat

Answer 3

Lisa okay,
I've set the background-repeat to no-repeat and it stopped repeating.

But why is it looking so small? It should be covering the whole background.

Answer 4

Yay!
Thanks Lisa 😊.It is working properly now.

But I still have a question,
Why it is not required to do this when we set degree to 90 or 270??

Answer 5

use
Background-repeat:no-rerepeat;