---
title: "Add a background image to a component"
slug: "add-a-background-image-to-a-component-1064963"
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**
> -   To add a background image to a headless Container, select the Container, click **Edit the style and behavior of the component**, and in **Styling** > **Background Image**, select an image from the Media Library. The background image is configured in the Container properties, so you do not need to add a Background Image field to the data source.
>
> -   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/105/sitecore-experience-accelerator/images/ee-style-icon.png).

    ![SXA-headless-toolbar.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/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**.