How to solve background color strips in linear-gradient?

Question

I don't want pattern, but simple linear-gradient.

But, By using following code I have got a background pattern strips.

body {
  background: linear-gradient( to top, #ffffff, #e6e6e6);
}

Checkout : Screenshot

right now the gradient keeps stopping and starting again he wants one smooth gradient — L_Church, Jan 23 '18 at 11:26
Actually, I was a li' confused of how to ask this question.. @All — Kaleem Elahi, Jan 23 '18 at 11:50

score 2 · Answer 1 · answered Jan 23 '18 at 11:30

2

You don't have any contents and no height, that's the reason for the stripes. Add height or contents, that will do it.

html, body {
  height: 100%;
}
body {
  background: linear-gradient( to top, #ffffff, #e6e6e6);
}

answered Jan 23 '18 at 11:30

Johannes

64,305
18
73
130

heh two answers same result. take this one it looks better to me – L_Church Jan 23 '18 at 11:31
1

... or refer to the duplicate question. – Andy G Jan 23 '18 at 11:32
the dupe question is basically mine but this does it with less – L_Church Jan 23 '18 at 11:32

score 0 · Accepted Answer · answered Jan 23 '18 at 11:30

0

body {
  background: linear-gradient( to top, #ffffff, #e6e6e6);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

From the linked question, this stops the background from repeating and sets the height of the graphic to 100% so it's not just one line

answered Jan 23 '18 at 11:30

L_Church

703
1
8
19

Thanks, @L_Church – Kaleem Elahi Jan 23 '18 at 11:45

How to solve background color strips in linear-gradient?

2 Answers2