Three.js scene background doesn't appear

I'm trying to add a background to a webgl scene(Three.js). The scene contains two animated spritesheets that I created using DAZ3D and Photoshop. I've tried just about everything but to no avail, the background is either white or black. I've tried many examples on the web then either my spritesheet animator won't work or the background won't appear. I read that I need to make two scenes with two camera's, but that doesn't seem to work as well.

I really don't understand why I would need to have two scenes anyway.

<script>
// standard global variables
var container,scene,camera,renderer,controls,stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var attack,defense;
init();
animate();
// FUNCTIONS         
function init(){
    // SCENE
    scene = new THREE.Scene();
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth,SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45,ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,NEAR = 0.1,FAR = 1000;
    var light = new THREE.PointLight(0xEEEEEE);
    var lightAmb = new THREE.AmbientLight(0x777777);
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
    scene.add(camera);
    camera.position.set(-10,30,400);
    camera.lookAt(scene.position);
    // RENDERER
    if (Detector.webgl)
        renderer = new THREE.WebGLRenderer({antialias:true});
    else
        renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);
    container = document.getElementById('ThreeJS');
    container.appendChild(renderer.domElement);
    // EVENTS
    THREEx.WindowResize(renderer,camera);
    THREEx.FullScreen.bindKey({charCode :'m'.charCodeAt(0)});
    // LIGHTS
    light.position.set(20,0,20);
    scene.add(light);
    scene.add(lightAmb);
    // BACKGROUND
    var texture = THREE.ImageUtils.loadTexture('images/sky.jpg');
    var backgroundMesh = new THREE.Mesh(new THREE.PlaneGeometry(2,2,0),new THREE.MeshBasicMaterial({map:texture}));
    backgroundMesh.material.depthTest = false;
    backgroundMesh.material.depthWrite = false;
    var backgroundScene = new THREE.Scene();
    var backgroundCamera = new THREE.Camera();
    backgroundScene.add(backgroundCamera);
    backgroundScene.add(backgroundMesh);
    // FLOOR
    var floorTexture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(10,10);
    var floorMaterial = new THREE.MeshBasicMaterial({map:floorTexture,side:THREE.DoubleSide,shininess:30});
    var floorGeometry = new THREE.PlaneGeometry(1000,1000);
    var floor = new THREE.Mesh(floorGeometry,floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);
    // MESHES WITH ANIMATED TEXTURES!
    var attackerTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel2.png');
    attack = new TextureAnimator(attackerTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
    var attackerMaterial = new THREE.MeshBasicMaterial({map:attackerTexture,side:THREE.DoubleSide,transparent:true});
    var attackerGeometry = new THREE.PlaneGeometry(50,50,1,1);
    var attacker = new THREE.Mesh(attackerGeometry,attackerMaterial);
    attacker.position.set(-5,20,350);
    scene.add(attacker);
    var defenderTexture = new THREE.ImageUtils.loadTexture('images/kitinalevel1.png');
    defense = new TextureAnimator(defenderTexture,2,13,26,25); // texture,#horiz,#vert,#total,duration.
    var defenderMaterial = new THREE.MeshBasicMaterial({map:defenderTexture,side:THREE.DoubleSide,transparent:true});
    var defenderGeometry = new THREE.PlaneGeometry(50,50,1,1);
    var defenderx = new THREE.Mesh(defenderGeometry,defenderMaterial);
    defenderx.position.set(25,20,350);
    scene.add(defenderx);
}
function animate(){
    requestAnimationFrame(animate);
    render();        
    update();
}
function update(){
    var delta = clock.getDelta();
    attack.update(1000 * delta);
    defense.update(1000 * delta);
    //controls.update();
    //stats.update();
}
function render(){
    renderer.autoClear = false;
    renderer.clear();
    renderer.render(scene,camera);
    renderer.render(backgroundScene,backgroundCamera);
}
function TextureAnimator(texture,tilesHoriz,tilesVert,numTiles,tileDispDuration){
    // note:texture passed by reference,will be updated by the update function.
    this.tilesHorizontal = tilesHoriz;
    this.tilesVertical = tilesVert;
    // how many images does this spritesheet contain?
    //  usually equals tilesHoriz * tilesVert,but not necessarily,
    //  if there at blank tiles at the bottom of the spritesheet.
    this.numberOfTiles = numTiles;
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(1 / this.tilesHorizontal,1 / this.tilesVertical);
    // how long should each image be displayed?
    this.tileDisplayDuration = tileDispDuration;
    // how long has the current image been displayed?
    this.currentDisplayTime = 0;
    // which image is currently being displayed?
    this.currentTile = 0;
    this.update = function(milliSec){
        this.currentDisplayTime += milliSec;
        while(this.currentDisplayTime>this.tileDisplayDuration){
            this.currentDisplayTime-=this.tileDisplayDuration;
            this.currentTile++;
            if (this.currentTile == this.numberOfTiles)
                this.currentTile = 0;
            var currentColumn = this.currentTile%this.tilesHorizontal;
            texture.offset.x = currentColumn/this.tilesHorizontal;
            var currentRow = Math.floor(this.currentTile/this.tilesHorizontal);
            texture.offset.y = currentRow/this.tilesVertical;
        }
    };
}        
</script>

What am I doing wrong?

Thanks in advance.