Canvas > Panel > Background image

Hey guys!

I recently started experimenting with the Canvas and Panel UI stuff.

I have a Canvas which has a Panel that has some buttons and text.

The canvas is a Screen Space - Overlay Render Mode.

I am simply looking to add a background image that will stay within the confines of the Canvas. I have tried several things and cannot get this working.

The first thing I tried was creating a simple Quad and having it outside of the canvas.. that worked but when I run my game in a smaller window that is obviously not idea since it is not part of the canvas.

When I added the Quad to the canvas it vanishes entirely and I am left with the ugly default Unity blue. No matter where I place it in the Canvas/Panel Hierarchy the quad does not appear.

I then under the Canvas, add a UI > Image the image appeared great I adjusted it to the border of the canvas, but now no matter what I do it will not fill up the canvas. I tried a few different things in the Rect Transform but was not able to get anything working.

All I am looking to do is have this background image be the background of the canvas, so no matter what size screen I play my game on it fills out the screen properly.. I feel as though the answer is probably something super simple that I am overlooking.

Thanks in advance for any assistance guys!

 

Try this if you haven't already:

1. Make the background image (a UI > Image) the first child of your Canvas. If it's the first child, it'll render before all of the other UI elements.

2. Set the background image's Anchor Preset to stretch in both directions. It's the double blue arrow choice in the lower right:


3. Set the Rect Transform's Left, Right, Top, Bottom values to 0.

 

That seems to have worked perfectly!

I already tried what you said the only thing I wasn't doing was setting all of those Transform's to 0!

Thank you so much!

Now in one of my scenes, I have a movie that plays from a Plane. Is there a way to attach the movie to the canvas so it is effectively centered and not chopped off?

 

You're rendering to a texture, right? If so, you can add a UI > Raw Image. Then assign the rendertexture to that UI element.

 

Yes, okay so I wrote a script to play videos a long time ago and it was depending on the movie to be attached to it. What would the simplest way to play the movie from the Raw Image Texture be?

I was able to get my old script working with it I just had to do some type casting!

Thanks again for your help!

 

Pretty useful Tomy Li!

Cheers!

 

Seems lots of people have had issues with adding a canvas with a child panel that is not visible. I ran into this problem as well, my panel was not visible, after many tweaks I solved my problem.
I simply changed the Pos Z from "0" to "-1" and the problem was solved.
Might I add, I've seen many posts where people have reinstalled software or changed their version, this is never the answer.
If you keep looking, the solution will be found.

 

when i try it i either see the background or i see the panel with ui text i have, it changes at posZ at around 2214 from just the image to no image, can somebody help me??

 

When I stretch the background image it completely disappears...

 

And how does one bring the image desired (jpg, png, etc) into this image object? Nothing seems to work. It has a fieled that says "Source Image (Sprite)", but this resists any effort to drag an image file into it.

 

Make sure you've imported the image as the right type. If the UI element is an Image component, import the image as a Sprite. If the UI element is a Raw Image component, import it as Legacy.