Imagen de background aleatorio de pantalla completa en la actualización del browser

Estoy usando esta secuencia de commands que encontré en línea para tener una image de background aleatoria cada vez que el browser se actualiza.

CSS

body{ background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

JS

 $(document).ready(function(){ var images=['images/001.jpg', 'images/002.jpg', 'images/003.jpg', 'images/004.jpg', 'images/005.jpg',]; var randomNumber = Math.floor(Math.random() * images.length); var bgImg = 'url(' + images[randomNumber] + ')'; $('body').css({'background':bgImg, 'background-size':'cover', }); }); 

Funciona bien en pantallas de más de 1150 px, pero less que eso, las imágenes comienzan a acumularse una encima de la otra. ¿Cómo puedo lograr que se estire sin importar el tamaño de la pantalla? No me importa si la image se recorta en pantallas pequeñas siempre que llene el lote.

Gracias

3 Solutions collect form web for “Imagen de background aleatorio de pantalla completa en la actualización del browser”

Me gusta esto

MANIFESTACIÓN

JS

 $(document).ready(function(){ var classCycle=['imageCycle1','imageCycle2']; var randomNumber = Math.floor(Math.random() * classCycle.length); var classToAdd = classCycle[randomNumber]; $('body').addClass(classToAdd); }); 

Encontré este artículo Imágenes de background aleatorias CSS3 y esto resolvió el problema

 <html> <head> <script type="text/javascript"> var totalCount = 5; function ChangeIt() { var num = Math.ceil( Math.random() * totalCount ); document.body.background = 'images/'+num+'.jpg'; document.body.style.backgroundSize = "cover";// Background repeat } </script> </head> <body> // Page Design </body> <script type="text/javascript"> ChangeIt(); </script> </html> 

Gracias de todos modos 🙂

Utilice la respuesta de Falu que se haya votado como correcta, pero implemente methods de CSS utilizados como una solución n. ° 1 en esta publicación: Imagen de background de página completa perfecta

 .imageCycle1{ background:url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";} 

Funciona muy bien para cada tamaño de pantalla.

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.