backgroundSize "cover" not working on Firefox
I am using the following to load a ramdom background image each time the
browser is refreshed. On top I use 2 z-layers that fade in, one from black
to trasparent and another a overlay pattern from transparent to solid.
Works fine on Chrome and Safari but Firefox refuses to fade out layer no1
(black to transpartent), and also Firefox refuses to strech the images to
cover the background.
<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>
</head>
<body style="background-color:#000">
<a style="display:block; position:fixed; left:0; top:0; width:100%;
height:100%; cursor:pointer" href="#/">
<div class="overlay fade-out one">
</div>
<div class="overlaygrid">
</div>
</a>
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
And the CSS
.fade-out {
opacity:1;
-webkit-animation:fadeIn ease-in 0;
-moz-animation:fadeIn ease-in 0;
animation:fadeIn ease-in 0;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.fade-out.one {
-webkit-animation-delay: 0.0s;
-moz-animation-delay: 0.0s;
animation-delay: 0.0s;
}
.overlay
{display:block;position:fixed;left:0;top:0;width:100%;height:100%;
background:#000; z-index:1 }
.overlaygrid
{display:block;position:fixed;left:0;top:0;width:100%;height:100%;
background: url('../assets/bg-overlay-pattern.png'); z-index:2}
No comments:
Post a Comment