# Image reference

> Change the properties of the UI Image.

Use the **Image** element to add pictures or a simple rectangle to your user interface (UI) as a background or visual element. You can adjust the size, color, and how the image fits within the image's boundaries.

## Image properties

The following properties are available for you to customize in the image's **Inspector** panel:

| **Property**        | **Description**                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sprite**          | Set the image to display. Select the field to show a list of available sprites in your draft. To add image files to your draft, refer to [Import Assets](/unity-studio/develop/assets/import-assets.md). Leave the field empty to display a simple rectangle.                                                                                                                            |
| **Color**           | Set the color of the image.                                                                                                                                                                                                                                                                                                                                                              |
| **Raycast Target**  | Enable this option to allow the image to receive input events, such as clicks or touches. Disable this option to allow input events to pass through the image to other UI elements behind it.                                                                                                                                                                                            |
| **Image Type**      | Choose how the image fits within the image's boundaries. Only appears if you assign a **Sprite**. Options include: **Simple**: Display the image as-is, without any scaling or tiling. **Sliced**: Scale the image but preserve the corners and edges, useful for UI elements like buttons or panels. **Tiled**: Repeat the image to fill the area, useful for backgrounds or patterns.  |
| **Preserve Aspect** | Enable this option to maintain the original aspect ratio of the image when scaling. Disable this option to allow the image to stretch and fill the area. This property appears only if you assign a **Sprite**.                                                                                                                                                                          |
| **Set Native Size** | Click this button to automatically resize the image element to match the original dimensions of the selected sprite. This property appears only if you assign a **Sprite**.                                                                                                                                                                                                              |

## UI Transform properties

The **UI Transform** component has the following properties:

| **Property** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Anchor**   | Define where the element stays relative to its parent (the canvas or another UI element). Use the preset selector or the two dropdowns to choose an alignment horizontally and vertically. The dropdowns have the following options:  **Left**, **Right**, **Top**, **Bottom**: Pin the element to the specified edge of its parent.  **Center**: Pin the element to the center of its parent.  **Stretch**: Stretch the element to fill the available space in that direction.  Anchors help ensure your UI remains properly positioned and adapts well to different screen sizes or when the window is resized. |
| **Position** | Set the object's location in 2D world space (X, Y).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Size**     | Set the object's width (**W**) and height (**H**).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Rotation** | Rotate the UI element. Set this value to a number in degrees.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

You can change the sizes, rotations, and positions in the following ways:

* Change the values in the component's text fields.
* Click and drag parts of the rectangle on the canvas:
  * Resize: Drag the corners and edges.
  * Reposition: Click and drag inside the rectangle.
  * Rotate: Hover above the corners until the rotation symbol shows, then click and drag.

## Additional resources

* [Unity Engine - UI Image Documentation](https://docs.unity3d.com/Manual/script-Image.html)
* [UI Creator](/unity-studio/develop/ui-creator/.md)
* [UI Canvas](/unity-studio/develop/ui-creator/canvas-ui.md)
* [Button](/unity-studio/develop/ui-creator/button.md)
* [Text](/unity-studio/develop/ui-creator/text.md)
* [Input Field](/unity-studio/develop/ui-creator/input-field.md)
* [Web View](/unity-studio/develop/ui-creator/web-view.md)
* [Video](/unity-studio/develop/ui-creator/video.md)
* [Toggle](/unity-studio/develop/ui-creator/toggle.md)
* [Slider](/unity-studio/develop/ui-creator/slider.md)