# Unable to set background image

**URL:** <https://phaser.discourse.group/t/unable-to-set-background-image/3982>\
**Category:** Phaser 3\
**Created:** [October 17, 2019, 4:43pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982 "2019-10-17T16:43:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fuller](https://avatars.discourse-cdn.com/v4/letter/f/91b2a8/32.png) [@Fuller](https://phaser.discourse.group/u/Fuller)\
**Post date:** [October 17, 2019, 4:43pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/1 "2019-10-17T16:43:42Z")

</div>

Hi all,

I have tried to set a background to this game made by Emanuele Feronato;

> **[Build a HTML5 endless runner with Phaser in a few lines of code using Arcade...](https://www.emanueleferonato.com/2018/11/13/build-a-html5-endless-runner-with-phaser-in-a-few-lines-of-code-using-arcade-physics-and-featuring-object-pooling/)**
>
> I was able to build a basic HTML5 endless runner with double jumps and object pooling to save resources thanks to Phaser 3 and Arcade physics. Jump from platform to platform and get the source code.

I tried adding:

this.load.image(“background”, “background.jpg”);

but I just can’t get it working.

I am unfamiliar with how Phaser 3 works and would be grateful to any help recieved.

Thanks in advance!

---

<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:** [October 17, 2019, 5:11pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/2 "2019-10-17T17:11:46Z")

</div>

- [http://phaser.io/tutorials/making-your-first-phaser-3-game/part2](http://phaser.io/tutorials/making-your-first-phaser-3-game/part2)
- [https://github.com/samme/phaser3-faq/wiki#why-dont-my-assets-load](https://github.com/samme/phaser3-faq/wiki#why-dont-my-assets-load)

---

<div class="post-metadata">

**Author:** ![Fuller](https://avatars.discourse-cdn.com/v4/letter/f/91b2a8/32.png) [@Fuller](https://phaser.discourse.group/u/Fuller)\
**Post date:** [October 17, 2019, 6:01pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/3 "2019-10-17T18:01:14Z")

</div>

I tried that but still can’t get it working, I just see a white screen…?

---

<div class="post-metadata">

**Author:** ![Villan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/villan/32/2920_2.png) [@Villan](https://phaser.discourse.group/u/Villan)\
**Post date:** [October 17, 2019, 6:24pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/4 "2019-10-17T18:24:36Z")

</div>

Did you add the background in the create function? this.add.sprite(0, 0, “background”);

---

<div class="post-metadata">

**Author:** ![Fuller](https://avatars.discourse-cdn.com/v4/letter/f/91b2a8/32.png) [@Fuller](https://phaser.discourse.group/u/Fuller)\
**Post date:** [October 17, 2019, 7:05pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/5 "2019-10-17T19:05:57Z")

</div>

> [@Villan](#):
>
> 0, 0, “backg

Yeah, tried that, no luck…

I thought this would be simple to do when I started it 😀

---

<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:** [October 17, 2019, 7:36pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/6 "2019-10-17T19:36:44Z")

</div>

Open browser console 👀

---

<div class="post-metadata">

**Author:** ![Villan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/villan/32/2920_2.png) [@Villan](https://phaser.discourse.group/u/Villan)\
**Post date:** [October 17, 2019, 7:43pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/7 "2019-10-17T19:43:08Z")

</div>

It is simple, if I can do it anyone can. Paste your code, someone may find that’s its just a simple typed error. Console will also show you if there is an error.

---

<div class="post-metadata">

**Author:** ![inceabdullah](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/inceabdullah/32/2067_2.png) [@inceabdullah](https://phaser.discourse.group/u/inceabdullah)\
**Post date:** [October 17, 2019, 7:52pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/8 "2019-10-17T19:52:21Z")

</div>

or on the network tab in the console shows that which path is downloaded for background.png

---

<div class="post-metadata">

**Author:** ![Fuller](https://avatars.discourse-cdn.com/v4/letter/f/91b2a8/32.png) [@Fuller](https://phaser.discourse.group/u/Fuller)\
**Post date:** [October 17, 2019, 10:15pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/9 "2019-10-17T22:15:52Z")

</div>

In console, I see;

Line 48: Uncaught SyntaxError: Unexpected token ‘{’

Here is the full code:

```
let game;

```

// global game options  
let gameOptions = {  
platformStartSpeed: 350,  
spawnRange: [100, 350],  
platformSizeRange: [50, 250],  
playerGravity: 900,  
jumpForce: 400,  
playerStartPosition: 200,  
jumps: 2  
}

window.onload = function() {

```
// object containing configuration options
let gameConfig = {
    type: Phaser.AUTO,
    width: 1334,
    height: 750,
    scene: playGame,

    // physics settings
    physics: {
        default: "arcade"
    }
}

game = new Phaser.Game(gameConfig);
window.focus();
resize();
window.addEventListener("resize", resize, false);

```

}

// playGame scene  
class playGame extends Phaser.Scene{  
constructor(){  
super(“PlayGame”);  
}  
preload(){  
this.load.image(‘background’, ‘background.png’);  
this.load.image(‘platform’, ‘platform.png’);  
this.load.spritesheet(‘player’, ‘player.png’, {  
frameWidth: 24,  
frameHeight: 48  
});

```
create(){
  
    this.add.sprite(0, 0, 'background');

    // group with all active platforms.
    this.platformGroup = this.add.group({

        // once a platform is removed, it's added to the pool
        removeCallback: function(platform){
            platform.scene.platformPool.add(platform)
        }
    });

    // pool
    this.platformPool = this.add.group({

        // once a platform is removed from the pool, it's added to the active platforms group
        removeCallback: function(platform){
            platform.scene.platformGroup.add(platform)
        }
    });

    // number of consecutive jumps made by the player
    this.playerJumps = 0;

    // adding a platform to the game, the arguments are platform width and x position
    this.addPlatform(game.config.width, game.config.width / 2);

    // adding the player;
    this.player = this.physics.add.sprite(gameOptions.playerStartPosition, game.config.height / 2, "player");
    this.player.setGravityY(gameOptions.playerGravity);

    // setting collisions between the player and the platform group
    this.physics.add.collider(this.player, this.platformGroup);

    // checking for input
    this.input.on("pointerdown", this.jump, this);
}

// the core of the script: platform are added from the pool or created on the fly
addPlatform(platformWidth, posX){
    let platform;
    if(this.platformPool.getLength()){
        platform = this.platformPool.getFirst();
        platform.x = posX;
        platform.active = true;
        platform.visible = true;
        this.platformPool.remove(platform);
    }
    else{
        platform = this.physics.add.sprite(posX, game.config.height * 0.8, "platform");
        platform.setImmovable(true);
        platform.setVelocityX(gameOptions.platformStartSpeed * -1);
        this.platformGroup.add(platform);
    }
    platform.displayWidth = platformWidth;
    this.nextPlatformDistance = Phaser.Math.Between(gameOptions.spawnRange[0], gameOptions.spawnRange[1]);
}

// the player jumps when on the ground, or once in the air as long as there are jumps left and the first jump was on the ground
jump(){
    if(this.player.body.touching.down || (this.playerJumps > 0 && this.playerJumps < gameOptions.jumps)){
        if(this.player.body.touching.down){
            this.playerJumps = 0;
        }
        this.player.setVelocityY(gameOptions.jumpForce * -1);
        this.playerJumps ++;
    }
}
update(){

    // game over
    if(this.player.y > game.config.height){
        this.scene.start("PlayGame");
    }
    this.player.x = gameOptions.playerStartPosition;

    // recycling platforms
    let minDistance = game.config.width;
    this.platformGroup.getChildren().forEach(function(platform){
        let platformDistance = game.config.width - platform.x - platform.displayWidth / 2;
        minDistance = Math.min(minDistance, platformDistance);
        if(platform.x < - platform.displayWidth / 2){
            this.platformGroup.killAndHide(platform);
            this.platformGroup.remove(platform);
        }
    }, this);

    // adding new platforms
    if(minDistance > this.nextPlatformDistance){
        var nextPlatformWidth = Phaser.Math.Between(gameOptions.platformSizeRange[0], gameOptions.platformSizeRange[1]);
        this.addPlatform(nextPlatformWidth, game.config.width + nextPlatformWidth / 2);
    }
}

```

};  
function resize(){  
let canvas = document.querySelector(“canvas”);  
let windowWidth = window.innerWidth;  
let windowHeight = window.innerHeight;  
let windowRatio = windowWidth / windowHeight;  
let gameRatio = game.config.width / game.config.height;  
if(windowRatio \< gameRatio){  
canvas.style.width = windowWidth + “px”;  
canvas.style.height = (windowWidth / gameRatio) + “px”;  
}  
else{  
canvas.style.width = (windowHeight \* gameRatio) + “px”;  
canvas.style.height = windowHeight + “px”;  
}  
}

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [October 18, 2019, 3:22am UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/10 "2019-10-18T03:22:42Z")

</div>

> [@Fuller](#):
>
> preload(){  
> this.load.image(‘background’, ‘background.png’);  
> this.load.image(‘platform’, ‘platform.png’);  
> this.load.spritesheet(‘player’, ‘player.png’, {  
> frameWidth: 24,  
> frameHeight: 48  
> });

In the `preload` method, it doesn’t look like there is a closing `}`. Code should be:

```javascript
preload() {
    this.load.image('background', 'background.png');
    this.load.image('platform', 'platform.png');
    this.load.spritesheet('player', 'player.png', {
      frameWidth: 24,
      frameHeight: 48
    });
  }

```

---

<div class="post-metadata">

**Author:** ![Fuller](https://avatars.discourse-cdn.com/v4/letter/f/91b2a8/32.png) [@Fuller](https://phaser.discourse.group/u/Fuller)\
**Post date:** [October 18, 2019, 10:57am UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/11 "2019-10-18T10:57:05Z")

</div>

Super! Thats it. Can’t believe it was something as simple as that.

Thanks so much!!

---

<div class="post-metadata">

**Author:** ![Villan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/villan/32/2920_2.png) [@Villan](https://phaser.discourse.group/u/Villan)\
**Post date:** [October 18, 2019, 12:47pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/12 "2019-10-18T12:47:29Z")

</div>

The Console is your friend, more often than not it’s something as simple as that. Some code editor software actually highlights the open and closing bracket of a code block, you should find out if yours does that and then you will know if your console says that same error you can check all your brackets and make sure they’re closing properly.

---

<div class="post-metadata">

**Author:** ![prob](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/prob/32/628_2.png) [@prob](https://phaser.discourse.group/u/prob)\
**Post date:** [October 24, 2019, 2:57pm UTC](https://phaser.discourse.group/t/unable-to-set-background-image/3982/13 "2019-10-24T14:57:14Z")

</div>

I’d recommend using VS Code, along with the plugins [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer), and [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome). Adding ES/JS lint will catch a lot of things as well.