Background Color

The colour that fills the column behind its content.

Where to find it
Labelled Background Color 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
backgroundColor

In plain English

This is the colour painted behind everything in the column. It fills the whole box including the padding, stops at the border, and never reaches into the margin — so if you want coloured space around your text, that space needs to be Padding rather than Margin.

You can pick a plain colour name such as "white" or "steelblue", or enter an exact value. A hex code like #1a4f8a is what most brand guidelines give you. An rgb or hsl value works too, and the versions with an alpha channel — rgba and hsla — let you make the colour partly transparent so whatever is behind it shows through.

The editor shows a swatch of the colour you have chosen and offers your system colour picker, so you do not need to know the code by heart.

When you would use it

  • A section should stand out as a coloured band across the page.
  • You are building a card that needs to sit on a tinted surface.
  • A call to action should catch the eye against the rest of the page.

How to change it

  1. Select the column, open "Selected Column", then "Background Color".
  2. Choose a keyword from the list, or type an exact value such as #1a4f8a.
  3. Add Padding so your content is not pressed against the edge of the colour.
  4. Check that your Text Color still reads clearly against it.
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

  • The colour does not extend into the margin. Coloured space has to come from Padding.
  • Always check contrast. Light grey text on a white background may pass your eye on a bright monitor and be unreadable on a phone in sunlight.
  • For a translucent colour use rgba or hsla here rather than the Opacity setting — Opacity fades the text and images too, not just the background.

Related settings

For developers

The technical reference for what this setting produces: MDN: background-color. 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