How to fill the entire screen with background picture?

[Aloragames]

i want to fill the entire screen with a picture no matter the screen size. I want the ability to scroll the background in a direction if needed.

Basically anything can happen on screen, sprites, 3d but the background remains stationary with optional scrolling

[Leonidas]

Hi @Aloragames,

Check this post, it may be helpful in doing that:

Scale background image to screen size

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.

[Aloragames]

I see trying to explore alternatives here, am I mistaken thinking the 2d UI would be great to work with images like backgrounds?

The question is how do then get the UI to show up behind objects in the scene? Its kind of defeating the original point of UI but methinks doing that will give me greater control over dimensions, aspect ratio and so on?

[Leonidas]

That’s a good question, thinking how to approach that. One way is to use two cameras, a UI camera that is rendering first and your normal camera that is rendering second without clearing the color buffer.

That way your UI camera will render the background at the start of the frame, and then your main game camera will render everything on top.

@yaustar do you have any other idea on that?

[yaustar]

Yeah, I was going to do an open office video with the method that Leonidas mentioned above

[yaustar]

Office hours video:

Render UI as fixed background with render layers - PlayCanvas Office Hours #13

Post about how layers and cameras work: [SOLVED] Layers and affect of the 'Order' - #7 by yaustar
Fixed project link: PlayCanvas 3D HTML5 Game Engine

[Aloragames]

PHENOMENAL SUPPORT! thank you for that will ask more questions later when i start implementing it