Javascript Girl
  1. Javascript Girl
  3. Image d'arrière-plan aléatoire en plein écran sur rafraîchissement du navigateur
Intereting Posts
Liste déroulante dynamique Pays / Etat Appelez une fonction une fois que la fonction précédente est terminée L'applet URLConnection.connect échoue après avoir été appelé depuis JavaScript Diapositive de contenu / transition de page HTML5 tournant une image avec un canevas Regex alphanumérique javascript Bootstrap "tooltip" et "popover" ajoutent une taille supplémentaire dans le tableau Est-il possible d'utiliser HTML.querySelector () pour sélectionner par l'attribut xlink dans un SVG? Comment écrire JavaScript avec les fonctions d'usine Quelle est la meilleure façon d'analyser un temps dans un objet Date de l'entrée utilisateur en Javascript? Comment puis-je accéder aux images de Javascript en utilisant le plugin Grails Asset-Pipeline? Comment faire pour réduire la méthode de réduction Focus polymère () sur l'élément <paper-input> ou <core-input> Fusionner la nouvelle fonction de filtre avec la pagination et le filtre existants jQuery / Javascript DOM / Javascript: obtenez le texte après l'étiquette

Image d'arrière-plan aléatoire en plein écran sur rafraîchissement du navigateur

J'utilise ce script que j'ai trouvé en ligne pour avoir une image d'arrière-plan aléatoire 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 bien sur des écrans de plus de 1150px mais rien de moins que cela, les images commencent à empiler l'une sur l'autre. Comment puis-je que cela s'étende, peu importe la taille de l'écran. Je ne me soucie pas si l'image est recadrée sur de petits écrans tant qu'elle remplit le lot.

Je vous remercie

Comme ça

DEMO

JS 

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

J'ai trouvé cet article des images d'arrière-plan aléatoires 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 🙂

Utilisez la réponse de Falu qui est votée comme correcte, mais mettez en œuvre les méthodes CSS utilisées comme une solution n ° 1 dans cette publication – Image de fond pleine page parfaite 

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

Cela fonctionne très bien pour chaque taille d'écran.