Articles on: The editor

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.
  4. Under Background, choose a type: Color, Image, Video or Slideshow.
  5. Choose the colour, or select the image or video file.


Selecting a row and choosing Orange in its Background block: the row turns orange


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.


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


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


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.


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.


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.


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.


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.

Updated on: 02/11/2026