# Background Image

## Content



Complete the following steps to set background image to **C1RangeSlider** control:

1.  In Solution Explorer, right-click the project name and select **Add** > **New Folder**.
2.  Rename the folder **Resources**.
3.  Add the desired image to the **Resources** folder of your local project.
4.  In Solution Explorer, click the **Show All Files**(![showallfilesbutton](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/imagesext/showallfilesbutton.png)) button.
5.  Right-click the image kept in **Resources** folder and select **Include In Project**.
6.  Right-click [C1RangeSlider](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.html) control and select **Properties**.
7.  In the **Properties** pane expand the **Appearance** node.
8.  Click the ellipsis button next to **BackgroundImage** property. **Select Resources** dialog box appears.
9.  Click the **Import** button and browse to **Resources** folder in your project.
10.  Select the image and click **OK** to save and close the **Select Resource** dialog box.

![dialogbox](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/selectresource-dialogbox.png)

### Setting the Background Image Layout

1.  In **Properties** pane, click the dropdown corresponding to **BackgroundImageLayout** property.
2.  Select the appropriate layout for the background image of your [C1RangeSlider](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.html) control.

## See Also

[Bar Style](/componentone/docs/win/online-input/usingthec1inputcontr/c1inputcontrols/C1RangeSliderControlOverview/C1RangeSliderAppearance/BarStyle)