# How do you set that the image is stretch to the full screen no matter what size the phone is?

**URL:** <https://forum.8thwall.com/t/how-do-you-set-that-the-image-is-stretch-to-the-full-screen-no-matter-what-size-the-phone-is/2971>\
**Category:** Technical Support\
**Tags:** FAQ\
**Created:** [September 30, 2024, 12:20pm UTC](https://forum.8thwall.com/t/how-do-you-set-that-the-image-is-stretch-to-the-full-screen-no-matter-what-size-the-phone-is/2971 "2024-09-30T12:20:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Peng\_Han\_Kum](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@Peng\_Han\_Kum](https://forum.8thwall.com/u/Peng_Han_Kum)\
**Post date:** [September 30, 2024, 12:20pm UTC](https://forum.8thwall.com/t/how-do-you-set-that-the-image-is-stretch-to-the-full-screen-no-matter-what-size-the-phone-is/2971/1 "2024-09-30T12:20:59Z")

</div>

![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/1/17d7ca93c82ab9c328d537315cbcf971d7020760.png)  
Which should I use? and what is the setting?

---

<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:** [September 30, 2024, 4:17pm UTC](https://forum.8thwall.com/t/how-do-you-set-that-the-image-is-stretch-to-the-full-screen-no-matter-what-size-the-phone-is/2971/2 "2024-09-30T16:17:29Z")

</div>

Currently the easiest way to setup a full-sized image on the screen is creating a custom component to adjust the width and height of the element on tick.

Here’s a custom component that should do the trick:

```auto
import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'bg-image',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  add: (world, component) => {
  },
  tick: (world, component) => {
    ecs.Ui.mutate(world, component.eid, (cursor) => {
      cursor.width = window.innerWidth
      cursor.height = window.innerHeight
    })
  },
  remove: (world, component) => {
  },
})

```

Here’s how it should look when it’s applied:

 ![Screenshot 2024-09-30 at 9.14.58 AM](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/f/fbc81b4eb41dd6cc423b95471d93a6781d1363bd.jpeg)

---

<div class="post-metadata">

**Author:** ![Peng\_Han\_Kum](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@Peng\_Han\_Kum](https://forum.8thwall.com/u/Peng_Han_Kum)\
**Post date:** [October 2, 2024, 3:56am UTC](https://forum.8thwall.com/t/how-do-you-set-that-the-image-is-stretch-to-the-full-screen-no-matter-what-size-the-phone-is/2971/3 "2024-10-02T03:56:45Z")

</div>

Thanks! it’s perfect