Quería tener una imagen de fondo aleatoria cada vez que se carga una página, de una lista de 5 imágenes.
Estaba tratando de seguir estas preguntas,
Imágenes de fondo aleatorias CSS3
pero nunca se responde oficialmente, y no puedo hacer que funcione. Sin embargo, parece que debería funcionar, y es posible que me esté perdiendo algo simple.
Quiero poner esto en la página _Layout, para que se aplique a cada página. Es una especie de TMI, pero estoy en VS2019, asp core mvc en c#.
Esto es lo que conseguí:
<head> <style>...</style> <script type="text/javascript"> var totalCount = 8; function ChangeIt() { var num = Math.ceil(Math.random() * totalCount); document.body.background = 'assets/bgImages/' + num + '.jpg'; document.body.style.backgroundRepeat = "repeat"; // Background repeat } </script> </head> <body>...</body> </html> <script type="text/javascript"> ChangeIt(); </script>Cuando accede a la propiedad de fondo en el cuerpo, le falta la parte ".style" y necesita usar "url('...')" para establecer las imágenes como fondo. Incluso puede configurar la imagen y repetir al mismo tiempo.
Aquí hay un ejemplo: https://jsfiddle.net/pg1u0rn6/
const randomId = 10836835; const pexelId = '60597/dahlia-red-blossom-bloom-60597'; document.body.style.background = "url('https://wallpaper.dog/large/" + randomId + ".jpg') repeat"; document.querySelector('.inner').style.background = "url('https://images.pexels.com/photos/" + pexelId + ".jpeg')"; body { background: red; height: 100vh; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; } .inner { width: 300px; height: 300px; background-size: cover !important; } <div class="inner"></div>En tu caso:
document.body.style.background = "url('assets/bgImages/" + num + ".jpg') repeat";