Mozilla and Opera 'background-size:cover' doesn't work
===

I am making a site with a background image slider where images must cover the 100% width and height of a div element where they are. The problem is that in Safari and Chrome everything works just fine, but in Opera and Mozilla Firefox, the images doesn't scale.

I tried adding '-o-background-size:cover' and '-moz-background-size:cover' but that didn't make the trick.

Here is the code:`

---HEAD---

....
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
			
		<script type="text/javascript">
		 $(document).ready(function()
		    {
		 var imgArr = new Array() // relative paths of images
		 imgArr[0]="images/artema_big.jpg";
		 imgArr[1]="images/donskoi_big.jpg";
		 imgArr[2]="images/dzerzhinski_big.jpg";
		
		
		 var preloadArr = new Array();
		 var i;
		
		 /* preload images */
		 for(i=0; i < imgArr.length; i++){
		 preloadArr[i] = new Image();
		 preloadArr[i].src = imgArr[i];
		 }
		
		 var currImg = 1;
		 var intID = setInterval(changeImg, 1000);
		
		 /* image rotator */
		 function changeImg(){
		 $(".fakeBackground").animate({opacity: 0}, 1000, function(){
		 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')top left no-repeat');
		 }).animate({opacity: 1}, 1000);
		
		 };
		
		 });
		
		</script>
		
		
			
	</head>
<body>
	
	<div class="parent">
	 <div class='fakeBackground'></div>
	 
	  	 <div class="menuLeft">
	  	 <div class="logo"></div>
	  		<ul id="menu">
	  			<li class="about"><a href="http://">О клубе</a></li>
	  			<li class="offers"><a href="http://">Услуги</a></li>
	  			<li class="cards"><a href="http://">Карты</a></li>
	  			<li class="personal"><a href="http://">Персонал</a></li>
	  			<li class="news"><a href="http://">Новости</a></li>
	  			<li class="contacts"><a href="http://">Контакты</a></li>
	  	
	  		</ul> 
	  	 
	  	 
	  	</div>
	  </div>
	  		<div class="rightBottom"><img src="images/virtualTour.png" alt="virtual_tour" /></div>
	 </div>
	 	</div>
	


</body>
</html>

and CSS:

  

    *{
    margin: 0px;
    }
    body, html{
    height: 100%;
    margin: 0px;
    }

    .parent {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    position: relative;

    }   
    .parent .fakeBackground {
     position: absolute;
     z-index: -1;
     width: 100%;
     height: 100%;
     margin: 0px auto;
     background-size: cover;
     -o-background-size: cover;
     background: url(../images/artema_big.jpg) no-repeat;
     background-position: center center;
     }

    .logo{
    width: 188px;
    height: 78px;
    background-image: url(../images/logo.png);
    margin-bottom: 20px;
    margin-left: 60px;
    }

    .menuLeft{
	
    width: 678px;
    height: 100%;
    background-image: url(../images/artemaDescr.png);
    background-size: cover;
    background-repeat: no-repeat;
    }

    #menu li{
    list-style: none;
    margin-bottom: 10px;
    position: relative;
    }

    #menu li a{
    font-family: Arial;
    font-size: 14px;
    border-bottom: 1px dotted;
    text-decoration: none;
    color: #373e96;
    }

    /*Menu Items*/

    .about{
	
    margin-left: 70px;
    }

    .offers{
	margin-left: 60px;
    }

    .cards{
    margin-left: 50px;
    }

    .personal{
    margin-left: 11px;
    }

    .news{
    margin-left: 5px;
    }
    .contacts{
    margin-left: -10px;
    }

    .rightBottom{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 301px;
	height: 520px;
	display: block;
}


Any help will be appreciated.

PS. The link for the site is: http://sportmax.codo.dn.ua
