0

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?

Livia Lavrentis
  • 11
  • 1

3 Answers3

1

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!

Livia Lavrentis
  • 11
  • 1
  • This was bugging me for a while. I wanted to confirm for anyone else looking, this solved the issue for me. – Kyle.Tryon Jul 29 '23 at 23:37
0

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

Ajay Chauhan
  • 159
  • 1
  • 7
  • Thank you! Sadly, this didn't change anything. I think that's on me, though, as I wasn't clear in my question what exactly I wanted my background to do. I asked my teacher for help and the told me to set the background-attachment to fixed! I appreciate your help. Thank you again!! :D – Livia Lavrentis Apr 06 '21 at 13:38
0

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

html, body {
  height: 100%;
}
Techuila
  • 1,237
  • 8
  • 12