How to Add a Background Image to the UI Canvas of Your Unity Game

How to Add a Background Image to the UI Canvas of Your Unity Game

In my last article, I promised that I would cover inserting a background image. Start your game engines! Let’s go!

In the Complete Unity Developer course lecture “Adding 2D User Interface Text”, our instructor, Ben Tristem, shows us how to add a background image to the UI (User Interface). Let’s learn how to do this, step by step.

Create the Background Image Element

1). Click on the Game Object Menu, which is located at the top of Unity’s interface.
2). Scroll over UI.
3). Click on the Image option, in the side menu that slides out. (Please refer to picture below).

Picture

Linking Your Image to Source Image & Re-sizing the Image

A thumbnail (small picture of your image) will appear in the Assets section of the Project Tab, at the bottom of your Unity interface. A white blank box will also appear in the canvas, which is in the middle of your screen. We want the image to take the place of that white blank box, and for that to happen we must do the following steps:

1). Go to the Project Tab, which is located on the Bottom-Left. Make sure you have selected Assets, which is located on the Left-Hand side in the Project Tab’s directory. Click on the thumbnail of your image, in the Assets area, and drag it to the blank box next to the word Source Image, which is located on the Bottom-Right of your screen in the Inspector Tab. Please refer to picture below.

Picture

Some of these steps will spoil an instructor challenge! Don’t read on, unless you really want to.

2). We need to resize the image, so that it fits inside of the borders of the Canvas. In order to do this, we need to see the border of the Canvas. To make the border visible, click on the Layers Drop-Down Box, which is located at the Top-Right of the screen. Next, select the Everything option. This will highlight the Canvas and give it a solid white border. Please see picture below.

Picture

3). Select Image, which is located in the list in the Hierarchy Tab, on the Left. Please see picture below.

4). Click on the Move Tool, which is located on the Top-Left. Please see picture below.

5). Click on the center of the Image box, and drag it till it snaps to the center of the Canvas. When it snaps you will see a thin white line appear in the center of the Canvas.

6). You will see the Blue Re-Sizing Handles, which are on the four corners of the Image box (Please see picture below). Click on them, one at a time, and drag them to resize the image.You need the word Prison to fill the upper third of the canvas. My image is a little too big, so please don’t use it as an example.

Picture

7). Click the Play Button, at the Top-Center of the screen, to see if the image displays properly. You want it to be centered and at the top one third of the screen, just like the example in the picture below.

Picture

In my next blog, I will show you how to add a background image file to the Assets area of the Project Tab. I have enjoyed showing you how to add a background image to your game, resize it, and make sure it is displaying properly. There is so much more to learn from theComplete Unity Developer! If you want to learn more, this course is a must have!

Until next time, happy programming to all! Have an awesome day!

A little about the author:

I’m Elizabeth R. Laurie, and I’m taking the Complete Unity Developer Course, Complete Blender Creator Course, and Game Physics Course. I love to, learn!
I have always been fascinated with animation and video games, and I plan to use these platforms to make clean, family oriented, entertainment. I also plan to revolutionize education, and make it fun for everyone!
 

2 Comments

  1. hello,
    i do it but in render don’t appear, what i do wrong?

  2. Hi there, can I suggest you ask over on our community site at https://community.gamedev.tv where there’s a thriving community waiting to help. Please be sure to explain how they can reproduce your issue.

Leave a Reply

Your email address will not be published. Required fields are marked *