# Set Background color for main camera

**URL:** <https://phaser.discourse.group/t/set-background-color-for-main-camera/1229>\
**Category:** Phaser 3\
**Created:** [February 14, 2019, 2:17pm UTC](https://phaser.discourse.group/t/set-background-color-for-main-camera/1229 "2019-02-14T14:17:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vomc](https://avatars.discourse-cdn.com/v4/letter/v/bbce88/32.png) [@vomc](https://phaser.discourse.group/u/vomc)\
**Post date:** [February 14, 2019, 2:17pm UTC](https://phaser.discourse.group/t/set-background-color-for-main-camera/1229/1 "2019-02-14T14:17:43Z")

</div>

Hi, I am new to Phaser3 and have had a hard time understanding the API docs.

I was looking to do something quite simple, which is to set the background color to grey when I initialize my scene. I found an example in the phaser3 examples that does this but I am a little bit confused and was wondering if someone could help me out.

The example is as follows:

```
    var config = {
    type: Phaser.WEBGL,
    scene: {
        preload: preload,
        create: create,
    },
    width: 900,
    height: 600
};

var objects = {};
var cam = null;

var game = new Phaser.Game(config);

function preload ()
{
    //this.load.image('image', 'assets/sprites/mushroom2.png');
}

function create ()
{
    
    cam = this.cameras.add(0, 0, 900, 600);
    // we need to have a random image here for some reason...

    objects.image0 = this.add.image(-100,-100, 'image');

    cam.setBackgroundColor(0xbababa);
}

```

(taken from: [http://labs.phaser.io/edit.html?src=src/camera\background%20color.js](http://labs.phaser.io/edit.html?src=src/camera%5Cbackground%20color.js))

I was trying to modify it and it appears that the second I remove the line which I have added a comment to above, the entire thing seems to break and it goes to a black background on my canvas.

If i keep the line in and load a non-existent image, positioning it far offscreen everything works well but it seems sort of confusing. Why do you need to load a non-existent image in order to have the background color of the canvas work?

Thanks!

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 14, 2019, 2:53pm UTC](https://phaser.discourse.group/t/set-background-color-for-main-camera/1229/2 "2019-02-14T14:53:10Z")

</div>

Simply set the color of the main camera to gray

```javascript
function create() {
  this.cameras.main.setBackgroundColor(0xbababa)
}

```

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [February 14, 2019, 3:58pm UTC](https://phaser.discourse.group/t/set-background-color-for-main-camera/1229/3 "2019-02-14T15:58:45Z")

</div>

Hi @vomc,  
It’s true, I had not realized it.  
I have verified that the problem mentioned only appears in phaser 3.15. In current and previous versions of Phaser, that problem doesn’t exist.

Regards.

---

<div class="post-metadata">

**Author:** ![dsuarezv](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dsuarezv/32/3984_2.png) [@dsuarezv](https://phaser.discourse.group/u/dsuarezv)\
**Post date:** [September 19, 2020, 9:23am UTC](https://phaser.discourse.group/t/set-background-color-for-main-camera/1229/4 "2020-09-19T09:23:56Z")

</div>

Thanks for this, I was getting crazy and it’s simply not working in 3.15.