Unity is displaying UI elements behind background image

I have been trying to fix this for 2+ hours, I am very new to Unity.

This is my hierarchy:
https://i.imgur.com/HKLa1aV.png

I have the notes and buttons in front of the canvas (I have these outside of canvas, I was just moving the objects around when taking this screenshot).

The buttons and notes appear behind the background image somehow (I have tried to put the image behind the canvas on a panel and on another canvas but none have worked).

This is how it looks like on 3D camera: https://i.imgur.com/Q64Nxf4.png
(I have moved the notes in front of the background image, but it still appears as is behind the background).

This is how it looks like when running the game (with background image at opacity 100%): https://i.imgur.com/bvwTX5i.png

Keep in mind that i have tried to change “Order in Layer” to from 0 to 1 and even 2, added some user layers and tried to order the objects through it, and I tried to put everything on a canvas.
My notes and buttons are 2D sprites.

I have also tried these solutions, and none have worked:

Pardon answering to the old thread. I had the same problem and discovered the answer. At least for me.

You must create canvas objects to display on the canvas. If you drop an image it wont render, but a UI->Image will. It comes with a host of attached components that make it work. (Canvas renderer, rect transform vs transform). You can either create the new object and rework it, or add those components to your existing setup.

Hope this helps someone.

The Z-value of your Panels and Buttons does not matter for what is rendered first.

The Order in Layer for your Canvas describes where your whole Canvas gets rendered. So Order in Layer 5 will always be rendered in front of anything below 5.

To render the Buttons on top of your Background, you need to put your Background at a higher position in your Hierarchy. Since the render order is Top to Bottom.

Here is an example:

You are a gentleman/gentlewoman and a scholar.