To present stories with an appealing background, you can use the following layers
Image
Video
Color
Gradient
Shading
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: https://en.wikipedia.org/wiki/HTML5_video#Browser_support
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.
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:
Shading
