# About transparent background

**URL:** <https://phaser.discourse.group/t/about-transparent-background/5226>\
**Category:** Phaser 3\
**Created:** [February 17, 2020, 2:58pm UTC](https://phaser.discourse.group/t/about-transparent-background/5226 "2020-02-17T14:58:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [February 17, 2020, 2:58pm UTC](https://phaser.discourse.group/t/about-transparent-background/5226/1 "2020-02-17T14:58:35Z")

</div>

Hi @everyone,

I’ve been looking for a way to make background transparent as it was valid for phaser2. I know i have one example working on phaser2 and also i saw that [this example](https://phaser.io/examples/v3/view/game-config/transparent) on v3 examples. Actually this shows everything except i’m using a Scene Object.

```
import _Scene from './partials/Scene';

// @DEBUG
import FPSText from './partials/FPSText';

class Page extends _Scene {
    constructor() {
        super({ key: 'Page', active: true });
    }
    init() {
        super.init();
        // this.cameras.add(0, 0, this.game.config.width, this.game.config.height, true, 'own');
        this.cameras.main.setBackgroundColor('rgba(0, 0, 0, 0)');
        this.fpsText = new FPSText(this);

        var graphics = this.add.graphics();

        graphics.lineStyle(50, 0xffffff);

        graphics.beginPath();
        graphics.arc(this.centerX, this.centerY, 100, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), false, 0.02);
        graphics.strokePath();
        graphics.closePath();

        graphics.beginPath();
        graphics.lineStyle(40, 0xff00ff);
        graphics.arc(this.centerX, this.centerY, 100, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), true, 0.02);
        graphics.strokePath();
        graphics.closePath();
    }

    update() {
        this.fpsText.update();
    }
}

const config = {
    type: Phaser.CANVAS,
    backgroundColor: 0x062830,
    url: App.url,
    transparent: true,
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
        autoCenter: true,
        width: 1920,
        height: 1080,
        parent: 'core',
        fullscreenTarget: 'core'
    },
    // banner: {
    // text: '#ffffff',
    // background: [
    // '#fb8cb3',
    // '#d44a52',
    // '#871905',
    // '#581505'
    // ],
    // hidePhaser: false
    // },
    scene: [Page]
};
const game = new Phaser.Game(config);

```

And `Scene` is just this:

```
export default class Scene extends Phaser.Scene {
    constructor(scene) {
        super(scene);
    }

    init() {
        this.centerX = this.game.config.width / 2;
        this.centerY = this.game.config.height / 2;
        this.sound.pauseOnBlur = false;
    }

}

```

What could it be the problem ? Any help appreciate Thx!

---

<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:** [February 17, 2020, 6:51pm UTC](https://phaser.discourse.group/t/about-transparent-background/5226/2 "2020-02-17T18:51:36Z")

</div>

Remove

```
backgroundColor: 0x062830

```

and

```
this.cameras.main.setBackgroundColor('rgba(0, 0, 0, 0)');
```

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [February 17, 2020, 7:53pm UTC](https://phaser.discourse.group/t/about-transparent-background/5226/3 "2020-02-17T19:53:54Z")

</div>

> [@samme](#):
>
> backgroundColor: 0x062830

It’s not in my code i’m guessing and already have

> [@hcakar](#):
>
> this.cameras.main.setBackgroundColor(‘rgba(0, 0, 0, 0)’);

this here 😃

edit: I just saw that i have that 😃 I’ll try it tomorrow and let you know \<3

---

<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:** [February 17, 2020, 8:12pm UTC](https://phaser.discourse.group/t/about-transparent-background/5226/4 "2020-02-17T20:12:27Z")

</div>

Remove both.