[英]Gradient background repeats despite having “no-repeat” when I scroll
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%.我还将 HTML 的高度设置为 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?有什么对你们有用的吗?
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所以它可以根据需要工作
Just add a height
of 100%
for both html and body tags.只需为 html 和正文标签添加
100%
的height
。 And you're good to go.你对 go 很好。
html, body {
height: 100%;
}
I asked my teacher for help during my class and they pointed me towards setting the background-attachment to fixed and that worked.我在我的 class 期间向我的老师寻求帮助,他们指出我将背景附件设置为固定并且有效。 Now the background stretches across the page and doesn't repeat.
现在背景延伸到整个页面并且不再重复。
body {
background-attachment: fixed;
}
Thank you to everyone for answering!谢谢大家的回答!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.