How to scale background image with zoom

So, I'm working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.

As seen here when I zoom out the background image duplicates.

body { 
  background-image: url("Background.png");    
  height: 100%;
  width: 100%;
}

.content {
  margin: 0 auto;
  position: relative;
  width: 500px;
  z-index: 999;
}

<!DOCTYPE html>
<html>
<head>
  <title>The Sandbox</title>
  <meta name="description" content="">
  <meta name="author" content="Hades">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Style.css"/>
</head>

<body>
<center>
  </div>
    <img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
  </div>                
    <form>
      <input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
    </form>
  </div>
</center>
</body>
</html>

Any solution to this or am I just gonna have to bite the bullet?

Solution

you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.

background-repeat: no-repeat--> will make the background image is only shown once. background-size: cover--> make the background image cover the entire background area. background-position: center center--> make the background image be positioned in the center of the element (in this case, the body element)

body { 
background-image: url("Background.png");    
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}