Gradient is repeating

Question

Gradient of the page is repeating itself. I tried to use background: no repeat but it is not working properly. I also tried to extend the height of the body to 100% but still it is not working. When I tried to use the same code for another page and used linear-gradient(to right, red, green) and linear-gradient(to left, red, green), it worked , but it had the same issue of repeating the gradient when I used linear-gradient(to bottom, red, green). The CSS code is as follows :

body{
    height: 100%;
    background: no-repeat;
    background: linear-gradient(to bottom, red, green);
}

Wanted to know why did this happened ?

see this link : https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient — Nethra, Dec 24 '19 at 05:17
you only need `html { min-height: 100%; }` and you can remove height:100% from the body — Temani Afif, Dec 24 '19 at 08:21

score 0 · Accepted Answer · answered Dec 24 '19 at 05:20

0

Add Height on HTML tag 100%

html{height:100%;}
body{
    height: 100%;
    background-repeat: no-repeat;
    background: linear-gradient(to bottom, red, green);

}

https://jsfiddle.net/lalji1051/soujrxyf/3/

answered Dec 24 '19 at 05:20

Lalji Tadhani

14,041
3
23
40

It helped. But, I still not sure why making the body height 100% was not effective ??? – Atif Bashir Dec 24 '19 at 05:28
1

parent tag not full height – Lalji Tadhani Dec 24 '19 at 05:30
1

add body `height:100vh` then work – Lalji Tadhani Dec 24 '19 at 05:30

Gradient is repeating

1 Answers1