Background gradient repeating

Question

I'm currently building a login page to my website and it has a linear gradient as the background. But the linear gradient is repeating.

Here's my CSS:

body {
  background-image: linear-gradient(to bottom, white, grey);
  height: 400%;
  width: 400%;
}

How am I supposed to prevent this from happening?

DESSADER · Accepted Answer · 2022-12-16T21:05:59.057

-1

Use the background-repeat property with a value of none.

html {
  min-height: 100%;
}

body {
  background-image: linear-gradient(to bottom, white, grey);
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

edited Dec 16 '22 at 21:05

answered Dec 16 '22 at 20:55

DESSADER

49
3

That works! Also, how can I have it take up the entire screen? – Daxton Taylor Dec 16 '22 at 21:01
Updated the example with a demonstration of how to stretch the background over the entire page. – DESSADER Dec 16 '22 at 21:06

Background gradient repeating

1 Answers1