title: Positioning Background Image on Canvas Correctly Phaser
body: <p>I am trying to load a background image on canvas and position game camera on certain position and zoom level.</p>
  
  <p>This is the example background image:</p>
  
  <p><a href="http://i.hizliresim.com/3zYlaA.png" rel="nofollow noreferrer">http://i.hizliresim.com/3zYlaA.png</a></p>
  
  <p>When i load the image it looks like this
  <a href="https://i.stack.imgur.com/rv3a9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rv3a9.png" alt="enter image description here"></a></p>
  
  <p>I want to set position of background image (or camera ? )like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KNFod.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KNFod.png" alt="enter image description here"></a></p>
  
  <p>Canvas is 800x600</p>
  
  <pre><code>const preload = () =&gt; {
  
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  
    game.load.image("background", "http://i.hizliresim.com/3zYlaA.png")
  
  };
  
  const create = () =&gt; {
    cursors = game.input.keyboard.createCursorKeys();
  
     background = game.add.tileSprite(0, 0, 800, 600, 'background');
      //  Creates a layer from the World1 layer in the map data.
      //  A Layer is effectively like a Phaser.Sprite, so is added to the display list.
  
  
  }
  </code></pre>