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 -
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
This is because you are not setting the background-size property. This code should solve your problem:
#body {
background-size: cover; // or 100%
}
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.
Add some CSS, this will fix your problem
#body{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
}