Why does setting the body's background-image's background-position to center move the imag-CodePudding

With centered background image:

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html>

<body>
</body>

</html>

Without centered background image:

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>

<body>
</body>

</html>

Why did the image move up when I set the background-position to center?

CodePudding user response：

It's because you havn't set the width and height of the container. Providing width: 100vw and height: 100vh with background-position: center will centrally position the image.

/*backgrounds and colors*/

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html>

<body>
</body>

</html>

CodePudding user response：

You can change background-repeat: no-repeat; instead background-repeat: repeat;

If you want more clarity on drops then you can remove background-size: cover;

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
}

<!DOCTYPE html>
<html>

<body>
</body>

</html>