# How to make UI image stretch to fill the screen?

**URL:** <https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605>\
**Category:** Technical Support\
**Created:** [January 27, 2025, 3:09pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605 "2025-01-27T15:09:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [January 27, 2025, 3:09pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/1 "2025-01-27T15:09:07Z")

</div>

The following code doesn’t work.

```auto
    const setImage = (img) => {
      ecs.Ui.set(world, component.eid, {
        image: require(`./assets/${img}`),
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

```

It works well if the image has the same w/h aspect ratio as the view port, but it has gaps when the ratio is different.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [January 27, 2025, 5:41pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/2 "2025-01-27T17:41:27Z")

</div>

Hi, welcome to the forums!

What does your image look like? It could be that the image’s aspect ratio is affecting the way it’s able to display.

---

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [January 27, 2025, 5:56pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/3 "2025-01-27T17:56:28Z")

</div>

Thank you for your reply.

We have changed the ratio to be the same as the simulator, but it is not practical to adapt for every aspect ratio.

I wonder if there is any way to adaptively stretch the image.

Thanks,

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [January 27, 2025, 6:00pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/4 "2025-01-27T18:00:55Z")

</div>

Try changing the “BackgroundSize” attribute to “cover”.

---

<div class="post-metadata">

**Author:** ![Liuchuan\_Yu1](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/liuchuan_yu1/32/1637_2.png) [@Liuchuan\_Yu1](https://forum.8thwall.com/u/Liuchuan_Yu1)\
**Post date:** [January 27, 2025, 6:08pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/5 "2025-01-27T18:08:30Z")

</div>

WOW! Thank you!

It works like a charm!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [January 31, 2025, 6:09pm UTC](https://forum.8thwall.com/t/how-to-make-ui-image-stretch-to-fill-the-screen/4605/6 "2025-01-31T18:09:23Z")

</div>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.