Menu
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;
}
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', });
});
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
489
jpg', 'bg-05. jpg', 'bg-06. jpg', 'bg-07. jpg' ); // array of filenames $i = rand(0, count($bg)-1); // generate random number size of the array $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen ?>
Try to preload the image resource to the device storage by including the image in DOM like in the following HTML-Code. Maybe the error comes up because the image resource need to be loaded which takes some time (flickering).
You have to set the background-repeat property to no-repeat . This will ensure that the background-image is not repeated. The image will only be shown once. To fit the image into each cell you can use background-size: cover and background-position: center .
Like this
DEMO
JS
$(document).ready(function(){
var classCycle=['imageCycle1','imageCycle2'];
var randomNumber = Math.floor(Math.random() * classCycle.length);
var classToAdd = classCycle[randomNumber];
$('body').addClass(classToAdd);
});
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 :)
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With