CODEWITHSUNDEEP

htmlcssbackground-imagelinear-gradientsrepeating-linear-gradient

Whitenerius

Reputation: 65

CSS "background-image: linear-gradient" makes unwanted repeating color stripes with 180 degrees

When i use:

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

The result is as expected:

But when i change the angle to 180' or 0' it makes stripes:

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.

Upvotes: 2

Views: 381

Answers (1)

Whitenerius

Reputation: 65

I figured that the problem is about the unknown height of the body element. So it repeats the small heighted background-image. 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%);
    }

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.

Upvotes: 3

Related Questions