Estoy usando este script que he encontrado en internet para tener un azar de la imagen de fondo en cada vez que el navegador 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 las pantallas más grandes que 1150px pero nada menos, que la imagen comienza a amontonarse unos encima de otros. ¿Cómo puedo hacer para estirar no importa de qué tamaño de pantalla. No me importa si la imagen se recorta en pequeñas pantallas mientras se llena el lote.

Gracias

OriginalEl autor no0ne | 2013-08-17

3 Comentarios

  1. 7

    Como este

    DEMO

    JS

    $(document).ready(function(){
        var classCycle=['imageCycle1','imageCycle2'];
    
        var randomNumber = Math.floor(Math.random() * classCycle.length);
        var classToAdd = classCycle[randomNumber];
    
        $('body').addClass(classToAdd);
    
    });
    este es el ejemplo que estoy teniendo problemas con

    OriginalEl autor Falguni Panchal

  2. 2

    He encontrado este artículo
    De fondo aleatorio de imágenes CSS3
    ya esta resuelto 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 🙂

    incluso con este he tenido problemas como el «tipo de documento html» empezar a jugar con el javascript. siéntase libre de comentar..

    OriginalEl autor no0ne

  3. 0

    Uso Falu la respuesta de que es votado como correcta, pero implementar CSS métodos utilizados como una solución #1 en este post – Perfecta Completa De La Página De La Imagen De Fondo

    .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')";}

    Estupenda para cada tamaño de pantalla.

    OriginalEl autor mhlavacka

Dejar respuesta

Please enter your comment!
Please enter your name here