How to Add a background image in Unity

There are different ways in which you can set the background in Unity. The simplest way is using the UI Canvas to render an image as the camera background. There are other ways like using the skybox or multiple cameras but why bother when you can get it done in a few simple steps.

Unless you are planning to create a parallax background, this method will work regardless of the game being 2D or 3D. In case of scrolling or parallax background, you need to set the image as game objects. We have created a separate tutorial on parallax background for that.

Steps to add a background Image in Unity

1. Import and set properties of your background Image

Drag and drop your background image inside the assets folder. Select the image and set the texture type to 2D and UI.

Set Image type to 2D and UI

2. Adding a UI image to scene

Go to the Scene Hierarchy and add a UI image to it by clicking on the + sign and going to UI>Image.

Adding new UI image to Scene

Rename the image to background and the canvas to background Canvas.

Select the background image element in the hierarchy and set the anchor preset under Rect transform to stretch-stretch as shown in the image below.

Setting the anchor preset for your background

Set the Rect transform’s Left, Right, Top, Bottom, Pos Z to 0. This will stretch the image object to the size of the canvas.

Setting the margins for anchor

Drag and drop your background image to the source image parameter of the Image component. Uncheck the raycast target in the image component. If you don’t have a background image, then you can use stable diffusion AI to create free background image.

Image component with raycast disabled

3. Canvas Settings

Select the background Canvas and go to the Canvas properties in the inspector window. Select the Render mode as Screen Space Camera.

Selecting Render mode in Canvas

Drag and drop your main camera to the Render Camera property and set the Plane distance. Increase the plane distance value if your foreground objects are not visible.

Camera assigned to Canvas property

That’s it, you have successfully added a background image to your scene. Even if you resize the screen, the background will resize with it.

You can play around with the color property of the background image to add color tint and transparency to the background.

You cannot add any UI elements to this canvas. If you need UI in your scene then add a new canvas and set it as screen space overlay.

If you have any other questions, feel free to leave a comment below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from VionixStudio

Subscribe now to keep reading and get access to the full archive.

Continue reading