Fullscreen mode loses background/transparency?

[Dylan Cristy 0]

I am running my game as "transparent", directly in the body element, and setting a repeated tile background in the body through CSS.

If I enter fullscreen mode through a button click that triggers this.game.scale.startFullScreen(), the background tiling disappears and there's just a black background.

If I enter fullscreen mode "manually" (by physically pressing F11), the background remains.

What am I missing about how to start fullscreen mode?  How can I preserve the background?

[samme 709]

Try 

game.scale.fullScreenTarget = document.body;

 

[Dylan Cristy 0]

Thanks for the suggestion, but nope, still not working.

[drhayes 337]

Might be worth creating a TileSprite that's the width/height of your canvas and adding it directly to the Stage, behind the World. It should tile the same way and will obey the regular ol' canvas fullscreen.

[Dylan Cristy 0]

Hmm, I tried

this.game.stage.addChild(new Phaser.TileSprite(0, 0, this.game.width, this.game.height, 'MyTileName'));

but that seems to add it in front of the World, meaning, I can't see my main menu title or buttons.

I know the buttons are there though, because when I mouse over where they should be, the pointer changes to a hand.

And then if I click the button to start the game in fullscreen mode, the tiling does not continue to fill the screen, it ends at what would have been the height set in the TileSprite constructor.

Is there something I have to do to reset the tiling on resize?  Also, how do I get it behind the World?

[samme 709]

http://s.codepen.io/samme/debug/OpQzrZ/LQMExPavvXjk

[Dylan Cristy 0]

Nice, that worked, thanks!

I think it was the difference of

game.scale.fullScreenTarget = document.body;

and

game.scale.fullScreenTarget = document.documentElement;