# Unable to create full screen background image

**URL:** <https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538>\
**Category:** Phaser 3\
**Created:** [July 15, 2024, 1:49pm UTC](https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538 "2024-07-15T13:49:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jillsv](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jillsv/32/8391_2.png) [@jillsv](https://phaser.discourse.group/u/jillsv)\
**Post date:** [July 15, 2024, 1:49pm UTC](https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538/1 "2024-07-15T13:49:11Z")

</div>

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:

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

```

Thank you.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 15, 2024, 3:16pm UTC](https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538/2 "2024-07-15T15:16:30Z")

</div>

👋

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);

```

---

<div class="post-metadata">

**Author:** ![ohio](https://avatars.discourse-cdn.com/v4/letter/o/54ee81/32.png) [@ohio](https://phaser.discourse.group/u/ohio)\
**Post date:** [July 15, 2024, 4:12pm UTC](https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538/3 "2024-07-15T16:12:40Z")

</div>

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 🪑

---

<div class="post-metadata">

**Author:** ![jillsv](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jillsv/32/8391_2.png) [@jillsv](https://phaser.discourse.group/u/jillsv)\
**Post date:** [July 16, 2024, 8:14pm UTC](https://phaser.discourse.group/t/unable-to-create-full-screen-background-image/14538/4 "2024-07-16T20:14:43Z")

</div>

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