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.
Add a background image
- Select the block and open the Styles tab of the inspector.
- Expand the Background images panel. It is expanded automatically on a block that has a background image.
- Click Add a layer. The Select or Upload Background window opens on the background library.
- Click one or several images. Each click adds the image to the selection or removes it.
- 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.
| 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.
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.