Background

To present stories with an appealing background, you can use the following layers

Image
Video
Color
Gradient
Shade
Divider

By combining these layers you can design your story background. For example, it is possible to add a color or a gradient with transparency over a background image. This allows you to better highlight text on a bumpy background or colorize entire images. The color palette is predefined by the theme. Therefore, the story remains color-matched and will automatically adopt the new colors when the theme is changed.

Generally, the individual layers of the background are applied to the background from top to bottom, one after the other. This can create visually appealing color gradients and color combinations. Thus, it is possible to colorize videos and images to match the color mood of the story. This concept of additive background overlays, is also applied to individual blocks.

Each browser uses the best supported file format when playing videos Chrome, for example, prefers to use webM because it compresses better than mp4.

Note that the background image has no direct effect on the extent of the story. Only blocks, the grid and various settings affect the size of the story container.

Background images, videos, and effects are not displayed in Edit mode because multicolored or dark backgrounds and effects would make it difficult to edit the story. Switch to Preview mode to view or play background images, videos, and effects.

Image

This module allows you to place a background-filling image.

Browse Media: Opens the media manager to select an existing image or upload a new one.

Position: Determines the position in the image to be displayed in the upper left corner of the background. (Determines the position at which the image should be aligned).

Repeat: Determines if and how the image is repeated.

Attachment: Determines whether the image is fixed or moves with the scrolling.

Expansion: Determines how the image is enlarged.

Parallax: This setting allows you to apply a parallax effect to the background. The Parallax effect lets you make the background move with you as you scroll, simulating three-dimensionality and depth. You can adjust the speed at which the image moves and the offset, from the starting position of the image. It is also possible to set the effect to specific resolutions. (See Effects)

Opacity: Determines the opacity of the image.

Flip: Mirrors the image horizontally or vertically or both in combination.

CSS Class: Allows inserting additional CSS classes for the element.

CSS Style: Allows inserting inline CSS for the element.

Video

With this module you can embed a video as background. The following file types are available: MP4, WebM and Ogg. The browser will use the video format it supports at this point. However, you should always deposit an MP4 file, as this file type is supported by almost all browsers. You also have the option of allowing the video to repeat automatically, so that it results in a continuous moving background.

Overview of the video capability of browsers: HTML video

Color

In addition, you can also set a plain, single-color and transparent background as you wish to colorize images and videos. At this point, the theme colors are available for you to choose from. By using theme colors, you are always in the current color scheme. In addition, the story color scheme remains dynamic and automatically adapts to theme changes.

Original picture

Color overlay with color "Primary" and 70% transparency

Gradient

Color: Determines the base color for the gradient.

Brightness: Determines the algorithm for the start and end color. Either lighter, darker, or with a custom gradient color.

Type: You can choose between two types: linear and radial.

Direction: Determines the direction of the gradient. You can also choose between a linear or radial gradient.

Start position: Controls where the color transition begins (in % )

End position: Controls where the color transition end (in % )

Repeat: Controls whether and how a gradient should be repeated. Repetition only takes effecr if the gradient size is less then 100%.

Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.

CSS Class: Allows inserting additional CSS classes for the element.

CSS Style: Allows inserting inline CSS for the element.

Below you can view several gradients

Image 1 linear gradient: Color: "Warning to Matched Hue".

Below you can view several gradients:

Image 1 - linear gradient: Color: "Warning to Matched Hue". "Matched hue" is a hue of the selected color that is adjacent in the color wheel.

Image 2 - radial gradient: Color: "Warning to Matched Hue ", 50% Size

Image 3 - linear gradient with background image: "Primary to Matched Hue" with 70% transparency

Image 4 - linear gradient with color overlay and background image: "Primary to Matched Hue" with 70% transparency and color overlay "Success" with 80% transparency

Image 5 - linear gradient with color overlay and background image: "Primary to Matched Hue" with 70% transparency and color overlay "Warning" with 90% transparency

Shade

A shading is also a gradient. Start color is the selected color, end color is the full transparency of it. Shading is primarily used to lighten or darken backgrounds, thereby making text more legible on bumpy backgrounds.

Below you can see a white shading from right to left to make the dark text more visible on the dark, bumpy background.

Similar to the gradients, the following options are available:

Color: Determines the shading color.

Type: You can choose between two types: linear and radial.

Direction: Determines in which direction the shading should run. In addition, you can decide between a linear or radial course.

Start Position: Controls where the gradient starts (in % ).

End Position: Controls where the gradient ends (in % ).

Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.

Flip: Mirrors the image horizontally or vertically or both in combination.

CSS Class: Allows inserting additional CSS classes for the element.

CSS Style: Allows inserting inline CSS for the element.

Below you can view several gradients

Image 1 linear gradient: Color: "Warning to Matched Hue".

Divider

Dividers are used to graphically separate or connect the bottom or top of the story to the following or preceding story.

Following options are available:

Style: Library of graphic separator shapes.

Fill Color: Fill color of the shape. For a smooth transition, select the background color of the neighbor section (Story)

Height: Height of divider as CSS size unit.

Min. Height: Minimum height of divider shape as CSS size unit.

Max. Height: Maximum height of divider shape as CSS size unit.

Opacity: Determines the transparency. 1 = no transparency, 0 = 100% transparency.

Flip: Mirrors the image horizontally or vertically or both in combination.

CSS Class: Allows inserting additional CSS classes for the element.

CSS Style: Allows inserting inline CSS for the element.