---
title: "Add a background image to a component"
slug: "add-a-background-image-to-a-component"
abstract: "Add background images to your web pages to enhance the design."
---
# Add a background image to a component

> [!note]
> Use the Experience Editor for the steps described in this topic.

Adding background images to pages can add depth and visual interest to the design of your web pages.

> [!note]
> **Before you begin**
> -   [Enable background images for components](https://doc.sitecore.com/xp/en/developers/sxa/102/sitecore-experience-accelerator/enable-adding-a-background-image-to-a-rendering.html) in the Content Editor by adding the `_Background Image` template to the component data source. Then the Edit the style and behavior of the component icon appears on the toolbar of the Container component.
>
> -   Add at least one component inside the Container component. Otherwise, the background image is not rendered.

To add a background image to a component:

1. Click the Container component.
2. On the floating toolbar, click **Edit the style and behavior of the component** ![ee-style-icon.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/102/sitecore-experience-accelerator/images/ee-style-icon.png).

    ![SXA-headless-toolbar.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/102/sitecore-experience-accelerator/images/SXA-headless-toolbar.png)

3. In the dialog box, in the **Styling** section, click **Browse** to find the image in the media library.
4. Select the image, and then click **Select**.
5. Use the available options to style the image as needed.
6. Click **OK**.