# Background not scaling correctly

**URL:** <https://forum.makecode.com/t/background-not-scaling-correctly/32958>\
**Category:** Help\
**Tags:** game, art\
**Created:** [January 5, 2025, 8:05pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958 "2025-01-05T20:05:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jack8990](https://avatars.discourse-cdn.com/v4/letter/j/d26b3c/32.png) [@jack8990](https://forum.makecode.com/u/jack8990)\
**Post date:** [January 5, 2025, 8:05pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/1 "2025-01-05T20:05:39Z")

</div>

When I try to make a background for my new game, there seems to be a scaling issue. I tried scaling the thing up and down but it still didnt work. Can somebody please help me figure out how to have a painting asset automatically scale to fill the display?

 ![Screenshot 2025-01-02 8.17.08 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/1/b/1b395a8162fad522e526b93d1ffb824eb17422e8.png)  
Photo of the background asset  
 ![Screenshot 2025-01-02 8.16.54 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/4/9/4975d5b6e859baacccd9d2c5a0fd18dc507dc474.png)  
Photo of my code (I only have the background done rn)  
 ![Screenshot 2025-01-02 8.16.50 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/c/f/cf8f638e9e57c11acdd8e73632508b2fa91ef9d9.png)  
Photo of the simulator/error

---

<div class="post-metadata">

**Author:** ![Mega0star01](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mega0star01/32/14784_2.png) [@Mega0star01](https://forum.makecode.com/u/Mega0star01)\
**Post date:** [January 5, 2025, 8:50pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/2 "2025-01-05T20:50:17Z")

</div>

nope, the console thing (i forgot the name) is always 160 pixels wide and 120 pixels tall (ik there’s a way to change the size but idk how to use java).

---

<div class="post-metadata">

**Author:** ![Mr\_Duck](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mr_duck/32/13442_2.png) [@Mr\_Duck](https://forum.makecode.com/u/Mr_Duck)\
**Post date:** [January 5, 2025, 11:00pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/3 "2025-01-05T23:00:21Z")

</div>

@Mega0star01 you can change it with this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/7/e/7e48c696344dc26bf1a5361e08502675ae9dfdce.png)t  
just write that in java and you should be good to go  
(you can change the size with the numbers)(you can’t change at an other point of the game)

---

<div class="post-metadata">

**Author:** ![Bifrosty](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/bifrosty/32/24819_2.png) [@Bifrosty](https://forum.makecode.com/u/Bifrosty)\
**Post date:** [January 5, 2025, 11:00pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/4 "2025-01-05T23:00:56Z")

</div>

There is a few things you can do about this. The first would just to make the background image bigger (160 by 120) pixels like mentioned above.  
You could also use the zoom extension —\> [https://github.com/kiwiphoenix364/pxt-zoom](https://github.com/kiwiphoenix364/pxt-zoom)  
Another thing you could do is change the screen resolution. To do this switch to JavaScript and paste the following in:

namespace userconfig {  
export const ARCADE\_SCREEN\_WIDTH = 160  
export const ARCADE\_SCREEN\_HEIGHT = 120  
}

Just change the numbers to what you want and switch back to blocks. It’s worth noting that the make code simulator is intended for a 3:2 width height ratio and 54:32 is not. So there will always be some missing space with this background, so I would edit the background into a 3:2 ratio.

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [January 6, 2025, 4:20am UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/5 "2025-01-06T04:20:41Z")

</div>

i would use the scaling extentsion. Just keep in mind that you need to define the image as a seperate variable to work with the scaling blocks

> **[Extensions | Awesome Arcade](https://awesome-arcade.vercel.app/extensions?q=scaling)**
>
> This is a list of MakeCode Arcade extensions that I find super useful (or just plain cool) in my projects.

---

<div class="post-metadata">

**Author:** ![kaleb3335](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kaleb3335/32/16382_2.png) [@kaleb3335](https://forum.makecode.com/u/kaleb3335)\
**Post date:** [January 6, 2025, 6:07pm UTC](https://forum.makecode.com/t/background-not-scaling-correctly/32958/6 "2025-01-06T18:07:29Z")

</div>

or you just set the images resolution to the screen size and scale it to that
