Random Fullscreen Background Image On Browser Refresh
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-bac
Solution 1:
Like this
JS
$(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><scripttype="text/javascript">var totalCount = 5;
functionChangeIt()
{
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><scripttype="text/javascript">
ChangeIt();
</script></html>Thank you anyway :)
Solution 3:
Use Falu's answer that is voted as correct, but implement CSS methods used as a #1 solution in this post - Perfect Full Page Background Image
.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')";}
It works great for every screen size.
Post a Comment for "Random Fullscreen Background Image On Browser Refresh"