# Display Image

## Content



You can use images as background in Sizer and change their alignment and scaling to suit your requirements. Setting background image enhances the overall look of the application and makes it more engaging for the users.

Let us explore how you can display an image as background in Sizer control.

![Display image in C1Sizer](https://cdn.mescius.io/document-site-files/images/e1ce2c2c-9be8-44f5-8cf2-c228504644a5/images/displayimage.png)

To display an image in Sizer control, you can use [Image](/componentone/docs/win/online-sizer/) property of the [C1Sizer](/componentone/docs/win/online-sizer/) class and specify the file path of the image to be added to the control. This file path refers to the source directory of the application where the image is located.

The following code snippet shows how to display an image in Sizer.

```csharp
c1Sizer1.Image = Image.FromFile("../.../image.png");
```

## Image Alignment

By default, the image is aligned at the center of the control. However, you can easily change its alignment by using [ImageAlignment](/componentone/docs/win/online-sizer/) property of the [C1Sizer](/componentone/docs/win/online-sizer/) class. The **ImageAlignment** property accepts the value from [ImageAlignment enumeration](/componentone/docs/win/online-sizer/) to set the image alignment with respect to the Sizer control.

The following code snippet shows how to change the alignment of an image in Sizer.

```csharp
c1Sizer1.ImageAlignment = C1.Framework.ImageAlignment.LeftTop;
```

## Image Scaling

With Sizer, you can easily scale an image up or down by resizing it without affecting the quality. The **C1Sizer** class provides [ImageScaling](/componentone/docs/win/online-sizer/) property which accepts value from the [ImageScaling enumeration](/componentone/docs/win/online-sizer/) to set the scaling of the displayed image to one the following values:

*   **Clip**: Clips the image to the display area.
*   **Hide**: Hides the image.
*   **Scale**: Scales the image to fit the display area.
*   **Stretch**: Stretches the image to fill the display area.
*   **Tile**: Tiles the image to fill the display area.
*   **TileStretch**: Tiles the image into 3\*3 matrix and stretches it to fill the display area.
*   **TileStretchHorizontal**: Tiles the image into the row of 3 images and stretches it to fill the display area.
*   **TileStretchVertical**: Tiles the image into the column of 3 images and stretches it to fill the display area.

The following code shows how to set image scaling in Sizer.

```csharp
//set image scaling 
c1Sizer1.ImageScaling = C1.Framework.ImageScaling.Tile;
```