2

When i use:

body {background-image: linear-gradient(45deg, white 0%, grey 100%);}

The result is as expected: enter image description here

But when i change the angle to 180' or 0' it makes stripes: enter image description here

Well if this was what i wanted, i'd just use repeating-linear-gradient()

  • I tried searching it on internet, but results was always about using repeating-linear-gradient(). Rather than "Im having trouble with unexpected linear stripes"

  • I poked around with the angle, it only gives me this result when it is 0 or 180 degrees. lets say when the cosinus is 0.

Whitenerius
  • 65
  • 7

1 Answers1

3

I figured that the problem is about the unknown height of the body element. So it repeats the small heighted background-image. enter image description here is the result with 500px height.

And the resultant solution is:

body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        background-image: linear-gradient(180deg,white 0%, grey 100%);
    }

enter image description here It works like a charm.

I also realised that the tutorial i was following was showing it and i missed it cause i was focused on fixing it.

Whitenerius
  • 65
  • 7
  • Preferably set min-height instead of height on body (just in case the content is taller than screen). – Salman A Jun 18 '23 at 21:08