I'm trying to make some clouds move with a parallax effect but it doesn't seem to be working.

I have placed this in the head:

Code:
<link rel="stylesheet" type="text/css" href="clouds.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript></script>
<script src="js/jquery.BGParallax.js" type="text/javascript"></script>
<script>
	
	$.BGP({
			backgroundStretch: "images/body-bg.fw.png",
			backImage: "images/back.png",
			midImage: "images/midground.png",
			foreImage: "images/foreground.png",
			backTime: 8000000,
			midTime: 9000000,
			foreTime: 10000000,
			backEase: '',
			midEase: '',
			foreEase: '',
			backX: "300000px",
			backY: "300000px",
			midX: "0px",
			midY: "500000px",
			foreX: "-8000px",
			foreY: "200000px",
			effect:"backgroundPosition"
		});
	
</script>
and all files and images in the necesaary places. Is there a problem with where I have positioned the code?
Much appreciation for any help in advance

here is the site Sakeenah Education Centre