Estoy haciendo un Javascript Toggler, así que puse dos imágenes, una de noche y otra de día, la imagen de noche no aparece correctamente, consulte las siguientes capturas de pantalla para esas:
Pero la imagen en la noche no sale correctamente.
Aquí está mi 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>Aquí está mi 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; }Aquí está mi J -
function tagmahalday(){ document.getElementById("body").style.backgroundImage = "url(backgrounds/tjmahalday.jpg)" } function tagmahalnight(){ document.getElementById("body").style.backgroundImage = "url(backgrounds/tjmahalnight.jpg)" }Aquí están las imágenes a las que me referí:
Taj Mahal de día - https://cdn.britannica.com/86/170586-050-AB7FEFAE/Taj-Mahal-Agra-India.jpg
Taj Mahal de noche - https://www.holidify.com/blog/wp-content/uploads/2015/02/album_pic20.jpg
Esto se debe a que no está configurando la propiedad de tamaño de fondo. Este código debería resolver tu problema:
#body { background-size: cover; // or 100% }La imagen se repite porque es demasiado pequeña. Deberías encontrar una mejor imagen para la noche. Puede detener la repetición y estirar la imagen de esta manera:
body { background-size: 100%; background-repeat: no-repeat; }Pero todavía no se verá bien.
Agregue algo de CSS, esto solucionará su problema
#body{ background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100vh;}