Gradient background repeats despite having “no-repeat” when I scroll

Question

I've tried searching on here for answers but none of the suggested ones to other's questions have been working for me.

My code for the background is:

body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-repeat: no-repeat scroll;
background-size: cover;
color: #f4f4f4;
text-align: center;
}

I've also set my HTML's height to 100%. I even tried width, but that did nothing as well.

When I run this, it appears as this in my browser: Here it is repeating once I've scrolled down.

Is there anything that worked for any of you guys?

Answer 1

You can use mentioned below code

body {
background-image: linear-gradient(to bottom left, #ffe03d, #ff00e6);
background-size:100% 100vh;
color: #f4f4f4;
text-align: center;
}

So it is working as you need

Answer 2

Just add a height of 100% for both html and body tags. And you're good to go.

html, body {
  height: 100%;
}

Answer 3

I asked my teacher for help during my class and they pointed me towards setting the background-attachment to fixed and that worked. Now the background stretches across the page and doesn't repeat.

body {
background-attachment: fixed;
}

Thank you to everyone for answering!