# Set a background

The **Background images** panel dresses a block with one or several stacked images. This article explains how to add a background image and set its size, position and repeat. You will also learn to manage the background library.

## Before you start

- The **Background images** panel appears on the blocks that frame content. These are the **Container**, the **Accordion** and its items, the **Media**, the **Embed**, the modal, the contextual navigation and the cards of a content list.
- Background images come from a background library, separate from the media library. They dress the site and do not appear among your media.
- A color background or a gradient is set in the **Colors** panel: [Color a block](https://lovelyrender.com/documentation/color-block/).

## Add a background image

1. Select the block and open the **Styles** tab of the inspector.
2. Expand the **Background images** panel. It is expanded automatically on a block that has a background image.
3. Click **Add a layer**. The **Select or Upload Background** window opens on the background library.
4. Click one or several images. Each click adds the image to the selection or removes it.
5. Click **Add**. The button shows the number of images chosen, for example **Add (2)**. Each image becomes a layer of the background.

A layer starts at size **Auto**, centered and with no repeat. No empty layer is created until you have chosen an image.

## Set a layer

Each layer carries the name of its file. Click its chevron to expand it: a preview shows the size, position and repeat set. **Change image** replaces the image of the layer.

![The Background images panel of a card with one layer expanded, rangs-de-vignes.jpg: its preview, the Change the image button, the Cover size, the position set to bottom center, Horizontal 50% and Vertical 100%, the repeat set to None, then the Remove the layer and Add a layer buttons.](https://static.lovelyrender.com/uploads/2026/10/966-doc-pages-fonds.png)

| Setting | Values | Default value |
| --- | --- | --- |
| **Size** | **Auto**: the natural size of the image. **Cover**: the image covers the whole block, even if it is cropped. **Contain**: the whole image fits in the block, even if it leaves empty space. **Custom**: a **Width** and a **Height** in `px`, `%`, `vw`, `vh` or `rem`. An empty field means auto. | **Auto** |
| **Position** | A grid of nine points to set the image on a corner, an edge or the center. The **Horizontal** and **Vertical** fields give a precise value, in `%` by default or in `px`, `vw`, `vh` or `rem`. | Centered, 50% and 50% |
| **Repeat** | **None**, **Both**, **X** to repeat across or **Y** to repeat down. | **None** |

For example, lay a repeating texture set to **Both**, then on top of it a centered pattern with no repeat.

## Stack several layers

- The first layer in the list is painted above the others.
- From two layers, the **Move up** and **Move down** arrows of each layer change their order.
- **Remove layer** takes the layer off the block. The image stays in the background library.

## Change the background on hover or on phone

Background images are set by state and by screen, like the other settings of the **Styles** tab. Choose the state and the screen in the two top rows, then set the layers. The panel shows the layers of the chosen state and screen. A block can thus change image on hover, or carry a lighter image on **Mobile**.

A block that carries a saved style with background images takes them over as long as you do not touch them. As soon as you change a layer, the block has its own images. The icons at the top of the panel show the style’s images again, remove them on this block or remove yours.

**Warning:** If you remove the inherited images then update the style, the images leave the style for every block that carries it. [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/) details saved styles.

## Manage the background library

The **Select or Upload Background** window opens from **Add a layer** or **Change image**.

| Action | How |
| --- | --- |
| Upload images | Click **Upload file**, or drag your files into the window. Several files go up at once. |
| Search for an image | Type part of the file name in **Search background**. |
| See the details | Click a thumbnail. The side panel shows the enlarged image, its name and its size. |
| Choose an image | To replace the image of a layer, click a thumbnail then **Choose**. |
| Delete an image | In the side panel, click **Delete permanently**, then confirm. |

- The accepted formats are SVG, WEBP, PNG, JPG, JPEG and AVIF. The type is checked on the content of the file.
- An SVG is cleaned on upload: its scripts and its addresses to other sites are removed. An unreadable SVG is refused.
- A file that has the name of a file already uploaded replaces it.
- Uploaded images count toward the storage space of your plan.
- Any member who can edit content can upload and delete a background image.

An empty library shows **No files yet. Upload one above.** A search with no result shows **No results.**

**Warning:** **Delete permanently** erases the file for the whole site. Blocks that used it as a background image no longer show it. This deletion cannot be undone.

## See also

- [Color a block](https://lovelyrender.com/documentation/color-block/)
- [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)
- [Container](https://lovelyrender.com/documentation/container-block/)
- [Upload your photos and videos](https://lovelyrender.com/documentation/upload-photos-videos/)