# Background Image Layer

**URL:** <https://discourse.mapeditor.org/t/background-image-layer/6521>\
**Category:** Questions\
**Created:** [January 22, 2024, 2:22am UTC](https://discourse.mapeditor.org/t/background-image-layer/6521 "2024-01-22T02:22:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Phil\_Ciraolo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/phil_ciraolo/32/4416_2.png) [@Phil\_Ciraolo](https://discourse.mapeditor.org/u/Phil_Ciraolo)\
**Post date:** [January 22, 2024, 2:22am UTC](https://discourse.mapeditor.org/t/background-image-layer/6521/1 "2024-01-22T02:22:07Z")

</div>

I’m using Flutter with Flame both with the latest versions. Trying to set a background image for the game. In Tiled, I created a Tiled Map with a width of 120 and height of 68 using 16x16 Tile size. I then added an Image layer with a image (1920x1080). The image fills the entire map as I would expect.

In flutter I load the map using `levelGrid = await TiledComponent.load('level2.tmx', Vector2.all(16));`

I set the camera using `CameraComponent.withFixedResolution(width: 1920, height:1080 )`

Set anchor using `camera.viewfinder.anchor = Anchor.topLeft;`

The issue is that background image does not fill the screen. It shows in the top left but only fills approx. half the height and width. However, if I create a Tile Layer and add a tile image in each corner they do show in the corners where they should be.

I cant seem to get the background image to display properly and fill the screen but the map does.

Any help would be appreciated.

 ![sample1](https://canada1.discourse-cdn.com/flex035/uploads/mapeditor/original/2X/0/0e165c92d4ec795b98330a1c52a192e2d9b3d34f.jpeg)

 ![result](https://canada1.discourse-cdn.com/flex035/uploads/mapeditor/original/2X/8/8b79a0adf5b88b4d686109d83c5ab39be1b7c436.jpeg)

---

<div class="post-metadata">

**Author:** ![eishiya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/eishiya/32/2534_2.png) [@eishiya](https://discourse.mapeditor.org/u/eishiya)\
**Post date:** [January 22, 2024, 2:28am UTC](https://discourse.mapeditor.org/t/background-image-layer/6521/2 "2024-01-22T02:28:40Z")

</div>

This is a question best asked in the community for your engine, since the solution will be specific to it.

It’s possible there is a bug or oversight in the TiledComponent that performs scaling differently for tile layers versus image layers, or perhaps there are different scale settings for these elements that you need to look into.

---

<div class="post-metadata">

**Author:** ![bjorn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/bjorn/32/1599_2.png) [@bjorn](https://discourse.mapeditor.org/u/bjorn)\
**Post date:** [January 22, 2024, 7:22am UTC](https://discourse.mapeditor.org/t/background-image-layer/6521/3 "2024-01-22T07:22:36Z")

</div>

Just in case somebody knows the answer, note that this question was also posted on StackOverflow:

> <https://stackoverflow.com/questions/77853624/flutter-flame-tiled-background-image-wont-fill-screen>

But indeed your chances of finding the answer should be higher in the Flame community.