random fullscreen background image on browser refresh

javascript css random fullscreen

31,396

Solution 1

Like this

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

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

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

});

Solution 2

I found this article Random background images CSS3 and this solved the issue

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

Thank you anyway :)

31,396

Author by

no0ne

Updated on August 05, 2022

Comments

no0ne over 1 year

Im using this script that I found online to have a random background image on whenever the browser is refreshed.

CSS

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

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

});

Works fine on screens larger than 1150px but anything less than that, the images starts piling up one on top of another. How can I get this to stretch out no matter what screen size. I dont care if the image gets cropped on small screens as long as it fills the lot.

Thank you

no0ne over 10 years

this is the example I am having problems with
no0ne over 10 years

even with this I had problems as the "html doctype" started messing with the javascript. feel free to comment..