Why are my UI elements hidden behind the background?

You need different assets on different panels. As the UI operates in only 2 dimensions. (up down, left right)your background should be a standalone panel, with just it on it. Then put your assets on different panels, In your hirecahry it should / could look this.

canvas

• Canvas

• background panel

• other UI asset panel // - text // - image

Items are displayed in order of top to bottom of the hirecahry, so you need your larger elements high up, so other items display on top of them.

So on and so forth. Group UI assets that relate to each other. I. E in a fantasy game you would probably group health and mana together, but have spells in a different panel. I. E 2 health and armour in one panel and weapon icon and ammunition in another if it were a shooter genre.

Hope this helps and happy creating :)

Hi, I was having a similar problem with my game as well. I see you already have Image (script). For anyone else having this problem make sure you have that component added, because thats what fixed mine. ' Add Component' then 'UI' and finally 'Image'. Only needed to drag the sprite into the Source image and it worked for me.

Hey there, perhaps try (because of how Unity layers it's sprites) creating a few separate panels for each layer in descending render priority.

Because it looks as though you're overwriting what sprite the button has set inside it with the background and back again. Perhaps add an Image or a Panel to your hierarchy?

-edit- Make sure both are set to Sprite 2D for importing to Unity, and that the panel has the background, and the button your button.