> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Backgrounds in a grid scene

|| Grid mode is in beta and available in selected accounts only.

In a grid scene, you can give a row, a column or the whole scene a background: a colour, an image, a video or a slideshow. A background sits behind the content and grows with it, so a section can have a full-width image or colour while its text stays readable on top.

## Background types in a grid scene

A row or column in a grid scene can have one of these backgrounds:

* `Transparent` — no background. This is the default.
* `Color` — a solid colour. If your project uses a Brand, its colour tiles are shown first.
* `Image` — one image that fills the row or column.
* `Video` — a video that plays behind the content.
* `Slideshow` — several images shown one after another.

The background grows with the content of the row or column.

## Adding a background to a row or column

To add a background to a row or column:

1. Select the row or column. In the Build view, click its grab tab.
2. Open its background settings:
   * In the Design view, go to the `Background` block in the right panel.
   * In the Build view, click the background button in the toolbar above the item.
3. Under `Background`, choose a type: `Color`, `Image`, `Video` or `Slideshow`.
4. Choose the colour, or select the image or video file.

![Selecting a row and choosing Orange in its Background block: the row turns orange](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/9-01-row-background_17dt507.gif =1000xauto)

## Adding a background to the whole scene

To give the whole grid scene a background, set it in the scene settings:

* **In the Design view:** in the left panel, click `Scenes`. On the scene, hover and click the `•••` button, choose `Scene settings`, and set `Background`.
* **In the Build view:** click the button with the scene's name at the top right of the scene, and set `Background`.

For the other scene settings, see [Grid scene settings](https://help.maglr.com/en/article/grid-scene-settings-x7ftdk/).

## Adding an overlay to an image or video background

An overlay is a colour laid over an image or video background, for example to keep text on top of it readable.

To add an overlay:

1. Select the row or column with the image or video background, and open its background settings.
2. Choose one of the overlay tiles: `Plain`, `Darken 30%`, `Darken 60%`, `Fade to bottom`, `Brand tint` or `Lighten`.

![Selecting a row with a background image and choosing the Darken 60% overlay: the image darkens](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/9-03-overlay_154k8xb.gif =1000xauto)

To choose your own colour and transparency instead, use the `Overlay` block below the background settings.

## Keeping a background image in place while scrolling

`Scroll effect` decides whether a background image moves with the page:

* `Scroll with content` — the image scrolls with the row or column. This is the default.
* `Fixed (parallax)` — the image stays in place while the content scrolls over it, which gives the section a sense of depth.

`Scroll effect` is only available for an image background. To set it, open the background settings of the row or column and choose an option under `Scroll effect`.

In the editor, a `Fixed (parallax)` background is simulated, so it can look slightly different from the published page. Check it in the preview.

## Extending a background beyond its row or column

In the Design view, a background can run past the edges of its row or column, or stop inside them. Use this to let a background run to the edge of the page while the content keeps its place on the grid.

To extend a background:

1. Select the row or column. It needs a background.
2. In the right panel, click the `+` in the `Extend background` block.
3. Drag the handles on the edges of the background on the page, or enter a value for each edge. A positive value runs past the edge; a negative value stops inside it.
4. Click `Done`.

![Extending a row's orange background with its edge handles until it runs to both edges of the page](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/9-02-extend-background_vw9tfx.gif =1000xauto)

The left and right edges can also be pinned to a grid line or to the edge of the page, so they stay in place at every screen width. Click the unit next to an edge (`px`, `col` or `page`) to switch.

## Backgrounds in the Build view

In the Build view, you add backgrounds with the background button in the toolbar above a selected section, row or column. `Extend background` is not available in the Build view.

For what each view can do, see [Roles and views in the editor](https://help.maglr.com/en/article/roles-and-views-in-the-editor-13gasx2/).

## Frequently asked questions

### What is the difference between a background image and an image element?

A background image sits behind the content of a row or column and fills it. An image element is content in its own right: it takes up space in the row or column and other content flows around it. To add an image element, see [Add elements and building blocks](https://help.maglr.com/en/article/add-elements-and-building-blocks-1oleumf/).

### Why does my fixed background look different in the editor?

The editor simulates a `Fixed (parallax)` background, so it can look slightly different from the published page. Check the result in the preview. See [Preview & test your project](https://help.maglr.com/en/article/preview-test-your-project-1g0k0my/).

### How do I make a background run edge to edge while the text stays in the centre?

In the Design view, select the top-level row and set `Width` in the `Position` block to `Full width`. Then set `Inner width` in the `Layout row` block to `Content area`. The background runs from edge to edge and the content stays in the centred content area. In the Build view, select the section, click `Width` in the toolbar, and set `Outer width` to `Full` and `Inner width` to a smaller size. See [Layout types and position settings](https://help.maglr.com/en/article/layout-types-and-position-settings-25u81/).

### Can I change the background type on mobile?

No. The background type is set on desktop. On mobile you can change how it looks, such as the colour or the crop of the image, but not whether there is a background or which type it is.