Scale background image to screen size

Heyo, can somebody explain me how to make my background image auto scale to screen size ?

When i have desktop mode its ok, but whenever i keep scaling the screen size the image is trying to adapt to the screen size, but this happens.

This is the element settings of image:

I also tried other Presets, not only current one.

Here is 2D screen:

image

Any hints, please?

From my understanding, you need to set the scale blend on the screen to 1 for the screen component to fit to height and 0 to fit to width. So if you’re going for mobile, I guess setting it to 1 would be the way to go. Also you’ll need to have the entity the image component is on be a child of the entity the screen component is on. Hope you get it working, good luck.

It sounds like you want to do the equivalent of CSS cover property. I’ve got an example here that works with a square image: Responsive UI for all device in PlayCanvas

If your image is non-square, you will have to adapt the code.

If the game is only going to be portrait, what oxters168 suggested will work too.

Yeah it kinda worked, but setting blade scale changing the size of my buttons and images, and everything else included in 2D screen, size is good on mobile devices but small on desktop, when i set higher size of buttons they become too big on mobiles.

What didn’t work? Can you show images/video/an example project?

Are you trying to have a single UI setup for both landscape on desktop and portrait on mobile? If so, that’s VERY difficult to do and you be best off with two different layouts that you can change at runtime (its what I’ve done at previous companies I’ve worked at).

1 Like