I am making a Javascript Toggler So I put two images one of night and one of day the night image is-CodePudding

I am making a Javascript Toggler So I put two images one of night and one of day the night image is not correctly coming, refer to the following screenshots for those -

The day is coming just fine

But the image in the night is not coming correctly

Here is my html -

 <!DOCTYPE html>
<html>
  <head>
    <style>
     #upperpart h1{
     margin-top:12%;
      }
      </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devicxe-width">
    <title>JavaScript</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body id = "body">
    <div id = "upperpart">
      <center>
      <h1>JavaScriptToggler</h1>
      <button onclick = "tagmahalday()">Day</button>
      <button onclick = "tagmahalnight()">Night</button>
      <center>
    </div>
    <center>
    <img src = "thumbnail.png" id = "thumb"></center>
    <script src="script.js"></script>
  </body>
</html>

Here is my CSS -

button{
  border-radius:200px;
  background-color:antiquewhite;
  padding:15px;
  padding-left:60px;
  padding-right:60px;
  text-align:center;
  color:Black;
  font-size:17.5px;
  margin:5px;
}

Here is my Js -

function tagmahalday(){
document.getElementById("body").style.backgroundImage = "url(backgrounds/tjmahalday.jpg)"
}
function tagmahalnight(){
document.getElementById("body").style.backgroundImage = "url(backgrounds/tjmahalnight.jpg)"

}

Here are the images I referred to -

Taj Mahal at Day - https://cdn.britannica.com/86/170586-050-AB7FEFAE/Taj-Mahal-Agra-India.jpg

Taj Mahal at Night - https://www.holidify.com/blog/wp-content/uploads/2015/02/album_pic20.jpg

CodePudding user response：

This is because you are not setting the background-size property. This code should solve your problem:

.body {
    background-size: cover; // or 100%
}

CodePudding user response：

The image repeats because it is too small. You should find a better image for the night. You can stop the repetition and stretch the image like this:

body {
    background-size: 100%;
    background-repeat: no-repeat;
}

But it still won't look good.

CodePudding user response：

Add some CSS, this will fix your problem

#body{
  background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100vh;

}