A section can show a photo, a muted looping video or a gradient behind its content. Blocks inside a section, such as a Group used as a card, can have a background image, color or gradient of their own.
Add a background image to a section
Open your project in Fantasma.
Click the section on the canvas, or click its row in the Sections list. Its settings open in the right sidebar.
Next to Appearance, click + and select Fill image.
Click the empty Fill image field and choose an image. Add images and photos explains the ways to add one.
Optional. To keep the text over the image readable, pick an Overlay color and set how strong it is.
The image fills the whole section and is cropped to its shape, so keep the important part near the middle. To take it away, click the Fill image field and click Remove.
Fill image and Video belong to sections of the kind Section, which most sections on a page are. The header, a dialog and the post content are other kinds of section and do not have them.
Overlay lays a color over the image and leaves the text above it untouched. None, the default, lays nothing. Pick Black to darken the photo, then set the percentage beside it, from 0 to 100; a new overlay starts at 40%. For light text over the photo, open Color Scheme under Colors and click the moon icon, Dark, beside Theme.
To fade the image itself, click the sliders icon beside Fill image, Image settings. Opacity fades the image from 100% down to 0%, and Backdrop sets the color that shows through it: Background (the section's own background color), Black or White.
Play a video behind a section
Select the section.
Next to Appearance, click + and select Video. A Play on mobile switch appears under it once the video is set.
In Video, enter a YouTube or Vimeo link, or the address of a video file, such as https://example.com/media/waves.mp4.
The video plays muted and in a loop. To save data, phones and tablets show the Fill image instead, so add one as well; it also shows while the video loads. Turn on Play on mobile to play the video on phones and tablets too. Overlay works over the video as it does over an image, and Video settings, the sliders icon beside Video, holds its Opacity and Backdrop.
If your site has a cookie banner, a YouTube or Vimeo video starts only after the visitor accepts marketing cookies. A video file plays without waiting.
Add a gradient
Select the section or block.
Next to Colors, click + and select Gradient.
In Gradient, select one of the theme's gradients, such as Aurora or Sunset, or select Custom to make your own.
A custom gradient has a Type (Linear runs in a straight line, Radial from the center outward, Angular around the center, Diamond outward in a diamond shape), an Angle, and two to eight stops: the colors the gradient passes through. Each stop takes a color from your color scheme or any color, its opacity and its position. To reuse a gradient in other places, add it in Styles; How styles work explains Styles.
The same + menu adds Background, a plain color from your color scheme under the gradient, and Text color.
Give a block a background
Blocks that support it, such as a Group, have their own background settings:
Background under Colors fills the block with a color from the color scheme, such as Muted or Accent, or with a Custom color. Gradient sits next to it.
Fill image under Appearance puts an image behind the block. On a post, page, tag or author template, a Fill setting above it chooses where the image comes from: Custom image, the one you pick, or an image of that post, page, tag or author, such as its featured image.
Overlay under Appearance lays a color over the block's image, and Image settings, beside Fill image, holds its Opacity and Backdrop.
A section can show a photo, a muted looping video or a gradient behind its content. Blocks inside a section, such as a Group used as a card, can have a background image, color or gradient of their own.
Add a background image to a section
The image fills the whole section and is cropped to its shape, so keep the important part near the middle. To take it away, click the Fill image field and click Remove.
Fill image and Video belong to sections of the kind Section, which most sections on a page are. The header, a dialog and the post content are other kinds of section and do not have them.
Overlay lays a color over the image and leaves the text above it untouched. None, the default, lays nothing. Pick Black to darken the photo, then set the percentage beside it, from 0 to 100; a new overlay starts at 40%. For light text over the photo, open Color Scheme under Colors and click the moon icon, Dark, beside Theme.
To fade the image itself, click the sliders icon beside Fill image, Image settings. Opacity fades the image from 100% down to 0%, and Backdrop sets the color that shows through it: Background (the section's own background color), Black or White.
Play a video behind a section
https://example.com/media/waves.mp4.The video plays muted and in a loop. To save data, phones and tablets show the Fill image instead, so add one as well; it also shows while the video loads. Turn on Play on mobile to play the video on phones and tablets too. Overlay works over the video as it does over an image, and Video settings, the sliders icon beside Video, holds its Opacity and Backdrop.
If your site has a cookie banner, a YouTube or Vimeo video starts only after the visitor accepts marketing cookies. A video file plays without waiting.
Add a gradient
A custom gradient has a Type (Linear runs in a straight line, Radial from the center outward, Angular around the center, Diamond outward in a diamond shape), an Angle, and two to eight stops: the colors the gradient passes through. Each stop takes a color from your color scheme or any color, its opacity and its position. To reuse a gradient in other places, add it in Styles; How styles work explains Styles.
The same + menu adds Background, a plain color from your color scheme under the gradient, and Text color.
Give a block a background
Blocks that support it, such as a Group, have their own background settings:
Colors and appearance settings lists every background setting.