Please note, this feature is currently in beta. Request early access here
This guide is for stacks that use a background image. On desktop, the image sits full-width behind your content. On mobile, you can move that image so it sits above or below your content instead, tidy up the spacing around it, and choose the background colour that shows once the image moves out of the way
Moving the image above or below your content
- Open the mobile preview in side-by-side view (where you see desktop and mobile next to each other).
- Hover over the mobile preview. On any stack that has a background image, a small image icon appears.
- Click the image icon. You'll see the option to change the image position. Switch it from "behind" to either: Image above the stack content, or Image below the stack content.
The image moves into place automatically, so your content sits on its own with the image stacked above or below it.
Tidying up the spacing
When an image sits behind your content, the stack often has generous top and bottom spacing to give the image room to show. Once you move the image above or below, that spacing can be left empty and look like an awkward gap.
1. Open the width and spacing settings for the stack.
2. Reduce the top and bottom stack internal spacing so the gap looks right on mobile now that there's no image filling that space.
This is a mobile-only adjustment, so your desktop spacing stays as it was.
The background colour that appears
Once the image is no longer behind your content, a stack background colour shows in its place. You can change this colour:
- Go to the stack's design settings (edit pencil on the desktop preview).
- Open Stack background settings
. - Choose your background colour.
A couple of things to know about this colour:
- It also changes on desktop. On most sites you won't see any difference on desktop, because your image still fills the whole stack there and covers the colour.
- You'll only notice the colour on desktop if you've added an image opacity (a see-through layer over your image). In that case, the new colour shows through behind the image.
- Image opacity is automatically removed on mobile when you move the image above or below your content, since there's no longer an image sitting behind the content for it to apply to.
Quickly hiding the image on mobile
If you'd rather not show the image on mobile at all, you can hide it quickly from the mobile preview settings, without changing anything on desktop.
On smaller screens (where side-by-side isn't available)
On smaller screens, the side-by-side view isn't shown, so the hover image icon isn't there. You can still change the image position:
- Open Edit stack design.
- Go to Stack background settings in the side drawer.
- Change the image position from there.
Good to know
A few things you can't do just yet (these are planned for the future):
- You can't set a different stack background colour on mobile from the one used on desktop. Changing the colour changes it everywhere.
- You can't set a different column background colour on mobile from the one used on desktop, either.
Both of these are coming in a future update.