# Small parallaxed background for a large world

**URL:** <https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393>\
**Category:** Phaser 2 / CE\
**Created:** [February 25, 2019, 7:37pm UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393 "2019-02-25T19:37:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![eGene](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/egene/32/808_2.png) [@eGene](https://phaser.discourse.group/u/eGene)\
**Post date:** [February 25, 2019, 7:37pm UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393/1 "2019-02-25T19:37:29Z")

</div>

I have a large world (10000 x 10000) and a relatively small background (like 1600 x 1200) that can’t be stretched to world size because it looks ugly this way. Camera is centered on a player and player sees a small part of the world, that part is equal to browser’s viewport (like 1000 x 700 or whatever innerWidth and innerHeight is). I want the background to fit viewport (be stretched proportionally if needed) but always be a bit larger than viewport to let it act as parallaxed image. As player moves, the background image should move slightly too. Real-world analogy would be person sitting in front of a window (my world) looking at the landscape (background) outside the window. As person changes position (from top left corner to window center, for example) landscape in the distance moves slightly to reveal more of its top-left side.

Hope it all makes sense. How can I achieve this with phaser 2? Pure CSS/JS non-phaser solution (maybe with a background div behind the canvas) would also work.

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [February 27, 2019, 2:03pm UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393/2 "2019-02-27T14:03:53Z")

</div>

Have you seen how this game work ? [http://phaser.io/news/2019/02/xevious-mini](http://phaser.io/news/2019/02/xevious-mini)  
It looks like using a small parllaxed background

---

<div class="post-metadata">

**Author:** ![eGene](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/egene/32/808_2.png) [@eGene](https://phaser.discourse.group/u/eGene)\
**Post date:** [February 27, 2019, 3:44pm UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393/3 "2019-02-27T15:44:16Z")

</div>

Doesn’t look like what I need.

---

<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 27, 2019, 9:40pm UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393/4 "2019-02-27T21:40:34Z")

</div>

Set background’s `fixedToCamera` to true and then update with something like

```javascript
bg.cameraOffset.set(
  -0.1 * this.camera.x,
  -0.1 * this.camera.y
);

```

---

<div class="post-metadata">

**Author:** ![eGene](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/egene/32/808_2.png) [@eGene](https://phaser.discourse.group/u/eGene)\
**Post date:** [February 28, 2019, 3:53am UTC](https://phaser.discourse.group/t/small-parallaxed-background-for-a-large-world/1393/5 "2019-02-28T03:53:13Z")

</div>

Nice, thanks!