Search code examples
cssbackgroundgradient

Background gradient repeating

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?

Solution

  • 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%;
}