Skip to content

Give a section a colour, photo or gradient background

You can fill any section with a colour, a photo or a gradient. Colour and photo come from the Style panel, which sections, rows, columns and elements all have. Sections add a Background effects panel for gradients, fixed and parallax photos and YouTube video. The example builds a navy section with a city photo, white text and a gradient on top.

Add a colour and a photo

  1. Click Add Elements in the empty content area and pick Section from the Layout tab.
  2. Hover the section and open More > Settings.
  3. Open the Style panel.
  4. Pick a dark navy swatch for Background.
  5. Pick white for Font color.
  6. Under Background image, click Select Image. Search the media library, tick a photo and click Insert selected.
  7. Set Background style to Cover.
  8. Set Background position to Center center and click Save.
  9. Click + on the section and pick Text from the Content tab.
  10. Type a heading, such as Evening lectures, and one line below it. Set the heading to Heading 2 and centre both lines in the editor toolbar.
  11. Open the Style panel, set Font color to white and click Save.

Add a gradient

  1. Hover the section and open More > Settings again.
  2. Open the Background effects panel and set Background effect to Gradient.
  3. Pick a Start color and an End color, then click Save.
  4. Click Save on the toolbar, open the view menu (the eye icon) and choose Preview.

What you see

After the first steps, the photo fills the whole section behind the white heading. Cover crops what does not fit, and Center center keeps the middle of the photo in view. The navy colour shows only while the photo loads or where the photo does not reach.

The gradient blends from the start colour at the top to the end colour at the bottom. It sits on top of the photo. Opaque colours cover the photo completely; colours with some transparency let it show through.

Settings

Style panel (every section, row, column and element)

Setting What it does Default
Background A fill colour from the colour picker or a theme swatch None
Background image A picture from the media library, chosen with Select Image None
Background style Cover fills the element and crops; Contain shows the whole picture and may leave gaps; No repeat shows it once at its own size; Repeat tiles it Theme defaults
Background position Which part of the picture stays in view when it is cropped, such as Center center or Left top Theme defaults

When AI image generation is set up, Background image also takes a prompt. See AI image generation.

Background effects panel (sections only)

Background effect What it does Extra settings
Simple image (default) The photo scrolls with the page None
Fixed image The photo stays put while the page scrolls over it None
Parallax image The photo moves slower than the page. See Hero section for an example. Parallax speed, Parallax mode (Fixed or Local), Disable on mobile
Gradient Two colours blend across the section, on top of the photo if there is one Start color, End color, Gradient direction (180 degrees runs top to bottom), Start position, End position
YouTube video A muted YouTube video fills the section; tick Loop to repeat it YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Fixed and parallax effects move the photo you set in the Style panel. A YouTube video needs no photo.

If you don't see the background

  • There is no Background effects panel. Only sections have it. Hover the section, not a row, column or element, and open More > Settings.
  • The photo is cut off. Cover crops what does not fit the section. Change Background position to keep the subject in view, or choose Contain.
  • The gradient hides the photo. The gradient sits on top, and opaque colours cover the photo. Lower the opacity of Start color and End color in the colour picker.
  • The section shows no gradient. A gradient needs both colours. Pick a Start color and an End color.
  • The YouTube video does not play. YouTube video URL is empty or not a link to one video. Paste the video's full address, such as https://www.youtube.com/watch?v= followed by its ID.

What's next?

Something wrong or missing on this page? Report it or edit the page.