---
title: "Add a background image to a component"
slug: "add-a-background-image-to-a-component"
abstract: "Enhance the design of your web pages by adding a background image to components."
---
# Add a background image to a component

To further enhance the design of your web pages, you can add a background image to add depth and visual interest to your overall website design.

> [!note]
> Before you can add a background image to a component, your developers must switch this functionality on. You can [allow background images for components](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/enable-adding-a-background-image-to-a-rendering.html) by adding a template to your component datasource. Once the functionality is added, you will see the Assign Background Image icon in the component's toolbar.

To add a background image to a component:

1. In the component's toolbar, click **Assign Background Image**.
2. In the dialog box, in the **Data** section, in the **Background Image** field, click **Browse** to select the image.
3. In the **Stretch Mode** field, you can select the following displays for your background image: Stretch mode, Fixed Background, Parallax, Stretch, Stretch Vertically and Tile Horizontally, Tile Vertically and Tile Horizontally.

    By default,  image backgrounds will stretch to fit.

    ![Background image example](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/101/sitecore-experience-accelerator/images/sXA-background-image-example.PNG)

## Video: Add a background image to a component in 10 steps

You can watch this video for a demonstration of how you can enable adding a background image to a component.

:::youtube{id="MJPA5_m3Iv0"}