aléatoire en plein écran l'image de fond sur actualiser de votre navigateur

Im en utilisant ce script que j'ai trouvé en ligne pour avoir un hasard image d'arrière-plan à chaque fois que le navigateur est actualisé.

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

});

Fonctionne très bien sur les écrans de plus de 1150px mais rien de moins que cela, les images commence à s'empilent l'une sur l'autre. Comment puis-je obtenir ce pour s'allonger n'importe quelle taille de l'écran. Je n'ai pas de soins si l'image est rognée sur les petits écrans, tant qu'il remplit le lot.

Merci

OriginalL'auteur no0ne | 2013-08-17

  1. 7

    Comme ce

    DÉMO

    JS

    $(document).ready(function(){
    var classCycle=['imageCycle1','imageCycle2'];

    var randomNumber = Math.floor(Math.random() * classCycle.length);
    var classToAdd = classCycle[randomNumber];

    $('body').addClass(classToAdd);

});
    c'est l'exemple que je vais avoir des problèmes avec

    OriginalL'auteur Falguni Panchal

  2. 2

    J'ai trouvé cet article
    Aléatoire des images de fond CSS3
    et cela a résolu le problème 

    <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>

    Merci quand même 🙂

    même avec cela, j'ai eu des problèmes comme le "doctype html" commencé à jouer avec le javascript. n'hésitez pas à commenter..

    OriginalL'auteur no0ne

  3. 0

    Utilisation Falu la réponse qui est voté comme bonne, mais de mettre en œuvre des méthodes CSS utilisé comme une solution #1 dans ce post - Parfait Full Page Image D'Arrière-Plan

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

    Il fonctionne très bien pour toutes les tailles d'écrans.

    OriginalL'auteur mhlavacka