Unable to create full screen background image

Phaser 3
1

Hi everyone,
I am new to Phaser and am having difficulty making a background image full screen on my web browser. I use setBackground to blue and that works (the entire background is blue), but the image is squashed into the center. This is my current code:

this.cameras.main.setBackgroundColor('#87CEEB'); //light blue background
this.add.image(400, 300, 'image');  //squashed image in center of web browser

Thank you.

2

:wave:

I don’t think there should be any squashing (distortion) unless there’s some extra CSS somewhere. If you want to align the image in the top-left of the canvas it’s

this.add.image(400, 300, 'image').setOrigin(0, 0);
3

this is a great way to stop stretching,

  1. find out the pixel size of the image (in vs code go to the file with the image and look in bottom right corner)

  2. do this.add.image(400, 300, ‘image’).setDisplaySize(width of image in pixels, height of image in pixels);

if you dont want the image to be centered in the middle, what samme just said will definetly work :chair:

4

Thank you both very much! It was my CSS file. @samme @ohio