Contents

Background Image

A picture painted behind the column content, with control over how it is scaled, placed, and tiled.

Where to find it
Labelled Background Image in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
backgroundImage

In plain English

This paints a picture behind everything in the column. It is not the same as adding an Image component: a background sits behind your text and buttons rather than taking up space of its own, and it never pushes anything around. Nothing in the column has to make room for it.

You can choose an image from your team's media library, the same picker the Image component uses, or point at an https address for a picture hosted somewhere else. Choosing "No image" is different from leaving the setting alone — it actively paints nothing, which is how you switch off a background that came from somewhere else.

Three companion settings decide how the picture is drawn. Size decides whether it is scaled to fill the box or fitted inside it. Position decides which part stays in view when filling the box means cropping the edges. Repeat decides whether a picture smaller than the box is tiled to cover it.

A background is one of the few settings where a different choice per device really earns its keep. A CSS background cannot offer the browser a choice of files the way an Image component can, so picking a tighter crop for phones is the only way to keep the subject of a wide photograph visible on a narrow screen.

What each option does

OptionWhat you will see
coverScales the picture until it fills the whole column, cropping whatever hangs over the edges. The usual choice for a photograph.
containScales the picture until all of it fits inside the column. Nothing is cropped, but there can be empty space on two sides.
autoLeaves the picture at its natural size. Larger pictures are cropped and smaller ones leave space, which Repeat can fill.
center centerKeeps the middle of the picture in view. The safest default when cropping.
center topKeeps the top in view. Right for portraits and anything where heads must not be cut off.
no-repeatDraws the picture once. What you want for a photograph.
repeatTiles the picture across and down until the column is covered. For textures and patterns.
repeat-xTiles across only — a strip that runs the width of the column.
repeat-yTiles down only — a strip that runs the height of the column.

When you would use it

  • A section needs a photograph or texture behind its text.
  • You want a hero band with a heading sitting on top of an image.
  • A card should sit on a subtle pattern rather than a flat colour.
  • A wide landscape image loses its subject on phones and needs a different crop there.

How to change it

  1. Select the column, open "Selected Column", then "Background Image".
  2. Under Image, choose "From media library" and pick a picture, or choose "External URL" and paste an https address.
  3. Set Size to cover for a photograph that should fill the column, or contain to keep the whole picture visible.
  4. If you chose cover, set Position to the part of the picture that matters most — often center center, or center top for a portrait.
  5. Set Repeat to no-repeat for a photograph, or repeat for a texture meant to tile.
  6. Set a Background Color as well, so the column still reads correctly before the picture arrives.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Text over a photograph is often unreadable. Either pick an image with a calm area where the words sit, or put a translucent rgba Background Color over it.
  • A background image has no alt text, because it is decoration as far as a screen reader is concerned. Anything that carries meaning belongs in an Image component instead.
  • The picture only shows where the column actually has size. A column with no content and no Height has nothing to paint on.
  • Large files still cost your visitors their data allowance even though the picture is decorative. Prefer an image from the media library, which is delivered already resized and in a modern format.
  • Like Background Color, the picture fills the padding and stops at the border. It never reaches into the margin.

Related settings

For developers

The technical reference for what this setting produces: MDN: background-image. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next