# How to change the tilemap transparency

**URL:** <https://phaser.discourse.group/t/how-to-change-the-tilemap-transparency/4626>\
**Category:** Phaser 3\
**Created:** [December 17, 2019, 10:35am UTC](https://phaser.discourse.group/t/how-to-change-the-tilemap-transparency/4626 "2019-12-17T10:35:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![monteserin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/monteserin/32/2494_2.png) [@monteserin](https://phaser.discourse.group/u/monteserin)\
**Post date:** [December 17, 2019, 10:35am UTC](https://phaser.discourse.group/t/how-to-change-the-tilemap-transparency/4626/1 "2019-12-17T10:35:24Z")

</div>

This is what i tried to change the background transparency, but i just see the background image with alpha:1

```
cargarFondo(){
   this.map = this.add.tilemap('level1');
   const tileset = this.map.addTilesetImage('tiles', 'gameTiles');
   this.bgLayer = this.map.createStaticLayer('backgroundLayer', tileset);
   this.hierbaLayer = this.map.createStaticLayer('hierbaLayer', tileset).setDepth(100)
          
/* 
    To change the transparency, this is not working:
    this.bgLayer.setAlpha(0);
    this.bgLayer.alpha = 0;
    this.hierbaLayer.setAlpha(0);

    map.layers[0].alpha = 0;
    map.layers[1].alpha = 0;
    map.layers[2].alpha = 0;

    map.layers[0].opacity = 0;
    map.layers[1].opacity = 0;
    map.layers[2].opacity = 0;

    map.layers[0].visible = false;
    map.layers[1].visible = false;
    map.layers[2].visible = false;
 */
    this.collisionLayer = this.map.createStaticLayer('collisionLayer', tileset);        
    this.collisionLayer.setCollisionByExclusion([-1]);
}
```

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [December 18, 2019, 3:14pm UTC](https://phaser.discourse.group/t/how-to-change-the-tilemap-transparency/4626/2 "2019-12-18T15:14:41Z")

</div>

It looks like each layer has an `alpha` property you can set - [https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.StaticTilemapLayer.html#alpha\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.StaticTilemapLayer.html#alpha__anchor)

I believe the reason its not working is because you are accessing the layers wrong. `map.layers` doesn’t actually hold a reference to the layers themselves, but the layer data. The API implies that you need to use [https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html#getLayer\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html#getLayer__anchor) to get the actual layer that you’d set the `alpha` property on.

---

<div class="post-metadata">

**Author:** ![samuelmarcos-cpu](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samuelmarcos-cpu/32/3667_2.png) [@samuelmarcos-cpu](https://phaser.discourse.group/u/samuelmarcos-cpu)\
**Post date:** [July 2, 2020, 2:44am UTC](https://phaser.discourse.group/t/how-to-change-the-tilemap-transparency/4626/3 "2020-07-02T02:44:13Z")

</div>

worked with me changing StaticLayer to DynamicLayer