Repeating Image, on bottom only - With resizable stage

programming flash
1

I am working on a website coming soon landing page that will be entirely flash. I have design a flash file to be resizable and set not to scale or skew any of the objects. Now I am working on a image I want to span across the bottom of the stage. Currently I am attempting this effect by using a tiling bitmap. It kinda works, I have it on the bottom of the stage only, and its only the size of the image. BUT its tiling very strangely, and I tried to clear the sprite on every resize.

I have attached and image showing what I am attempting to fix. Below is my code.


import flash.events.Event;
import flash.display.Sprite;


var town:Buildings = new Buildings(0, 0);
var bgSprite:Sprite = new Sprite();

function updateSize(e:Event)
{
    bgRectang.width = stage.stageWidth;
    bgRectang.height = stage.stageHeight;

    monsterRectang.x = stage.stageWidth/2 - monsterRectang.width/2;
    monsterRectang.y = stage.stageHeight/2 - monsterRectang.height/2;


    bgSprite.graphics.clear();
    bgSprite.graphics.beginBitmapFill(town);
    bgSprite.graphics.drawRect(0, stage.stageHeight - town.height, stage.stageWidth, town.height);
    bgSprite.graphics.endFill();
}

function init()
{
    addChildAt(bgSprite, bgRectang.z + 1);

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    stage.addEventListener(Event.RESIZE, updateSize);
    stage.dispatchEvent(new Event(Event.RESIZE));

    bgRectang.x = 0;
    bgRectang.y = 0;
}

init();

stop();