Scale Background Image to Fill Entire World

[reggie3]

I have a top down view game in which the camera is centered at the center of the world, and uses lewster32's zoom technique as discussed in this post http://www.html5gamedevs.com/topic/9920-camera-zoom/?hl=zoom

  I am trying to create a background image that fills the entire world, but I have been unable to do so.

 

I am able successfully load the background image using the following code:

var background = this.game.add.image(0, 0, "lightBlueBackground");background.anchor.setTo(0.5, 0.5);

The background images shows up at the center of the camera view.

However, using the following code results in a background that only takes up a small portion of the center of the view.

 

var backgroundScaleWidth = 4000 / background.texture.frame.width;var backgroundScaleHeight = backgroundScaleWidth/16 * 9;background.scale.setTo(backgroundScaleWidth, backgroundScaleHeight);

If I use large numbers for the scale values like 5000, I get a larger background, but I can not tell where the world boundaries are.  Since I'm dynamically adding items to the world, I want to make sure that they are actually on the world, and not beyond it.