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.

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:

• Textures
• Sprites
• Render textures
• 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 elements:

// 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;

其他资源

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