Así que estoy tratando de hacer un fondo de pantalla completa de una imagen desde la API unsplash, pero parece que no puedo cambiar la URL de la imagen de fondo del div cuando hago document.getElementById("image").style.background = 'url("data["results"][0]["urls"]["regular"]")'; . Pero si no uso un div y uso img en su lugar, funciona pero no puedo hacerlo a pantalla completa. ¿Alguien sabe alguna solución para esto?
Aquí está mi código:
js
fetch("https://api.unsplash.com/search/photos?query=philippines&client_id=2BHRf_91BeuRTt7CDCE-_eA3l95wlZLWlyog-KQ2c2Y") .then( function(response){ console.log(response); if(response.status !== 200){ console.log("There was a problem. Status code: " + response.status); return; } response.json().then( function(data){ document.getElementById("image").style.background = 'url("data["results"][0]["urls"]["regular"]")'; } ) } ) .catch( function(err){ console.log(err+'404'); } )html
<html> <head></head> <link rel="stylesheet" href="style.css"> <body> <!-- <div class = "image_container"> --> <div id = "image"></div> <!-- <img id="image"></img> --> </div> </body> <script src="requests.js"></script> </head> </html>CSS
*{ padding: 0; margin: 0; } #image{ height: 100vh; background-image: url(); background-size: cover; background-repeat: no-repeat; }Olvidaste algunos " en tu url() .
Aquí hay un ejemplo:
fetch("https://api.unsplash.com/search/photos?query=philippines&client_id=2BHRf_91BeuRTt7CDCE-_eA3l95wlZLWlyog-KQ2c2Y") .then( function(response){ if(response.status !== 200){ console.log("There was a problem. Status code: " + response.status); return; } response.json().then( function(data){ document.getElementById("image").style.background = 'url(' + data["results"][0]["urls"]["regular"]+')'; } ) } ) .catch( function(err){ console.log(err+'404'); } ) *{ padding: 0; margin: 0; } #image{ height: 100vh; background-size: cover !important; background-repeat: no-repeat !important; } <div id = "image"></div>