Set background images with an image asset

You can use an imported or built-in image asset to set a background image for your UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary.

Use UI Builder to set a background image

To use UI Builder to set a background image for your UI:

1. Import a background image into your project.
2. Create a regular VisualElement in UI Builder.
3. Set the element’s background image to the imported image.

When you set the background image, you must select a supported background image type:

• TexturesAn image used when rendering a GameObject, Sprite, or UI element. Textures are often applied to the surface of a mesh to give it visual detail. More info
  See in Glossary
• SpritesA 2D graphic objects. If you are used to working in 3D, Sprites are essentially just standard textures but there are special techniques for combining and managing sprite textures for efficiency and convenience during development. More info
  See in Glossary
• Render texturesA special type of Texture that is created and updated at runtime. To use them, first create a new Render Texture and designate one of your Cameras to render into it. Then you can use the Render Texture in a Material just like a regular Texture. More info
  See in Glossary
• SVG Vector images

Note: To use an SVG image as a background for a VisualElement, you must install a package. To do so, in the Package Manager window, install the package com.unity.vectorgraphics from Git URL.

Use C# to set a background image

To use C# to set a background image for your UI, assign the image to the style.backgroundImage property.

The following code example shows how to set background images for visual elementsA node of a visual tree that instantiates or derives from the C# VisualElement class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
See in Glossary:

// Use the AssetDatabase method to load the texture.
myElement1.style.backgroundImage = AssetDatabase.LoadAssetAtPath<Texture2D>("path/to/imageFile.png");

// Use the AssetDatabase method to load the Sprite.
myElement2.style.backgroundImage = new StyleBackground(AssetDatabase.LoadAssetAtPath<Sprite>("path/to/spriteAssetFile.png"));

// Load the texture from project's Resources folder.
myElement3.style.backgroundImage = Resources.Load<Texture2D>("imageFile");

// Load the Sprite from project's Resources folder.
myElement4.style.backgroundImage = new StyleBackground(Resources.Load<Sprite>("spriteAssetFile"));

// Use the Unity Editor's default resources.
myElement5.style.backgroundImage = EditorGUIUtility.FindTexture("CloudConnect");
myElement6.style.backgroundImage = EditorGUIUtility.IconContent("FolderOpened Icon").image;

Additional resources

• UXML element Image
• Image import settings
• 9-Slice images with UI Toolkit
• EditorGUIUtility