You can add a background to certain elements that will compose your graphics such as Regions, Overlays, Containers, and Rectangle.
To add a background to any of these elements you need to
- Select the element from the tree or canvas
- Look for the background section on the Inspector on the right side of the editor.
- Choose the background type you want to use.
Element backgrounds can be a solid color, color bindings, a gradient, or an image.
To add a solid color pick the color from the picker, use the Hex code or RGBA values. Also, you can set the opacity to grant transparency to the background color.
Use it for example to generate a green screen for chroma key integrations.
Solid colors can also come from dynamic data. A data binding menu will show next to the Background picker whenever an element is children of some Data Provider that exposes string values.
Colors can be opaque or have an alpha channel (transparency), and can be defined in any of the following ways:
- Using a keyword, such as "blue" or "red", that is part of the accepted list of CSS colors.
- Using the RGB cubic-coordinate system, via the #-hexadecimal or the rgb() and rgba() functional notations.
- Using the HSL cylindrical-coordinate system, via the hsl() and hsla() functional notations.
For more information about color syntax in CSS, check this MDN article. There are other possible syntaxes —such as lch(), lab(), or color()— but we don't recommend using them since they are poorly supported across browsers.
To bind any color, just click on the binding menu and pick a string from the source that represents a color.
As with any other strings in JSON, colors in data can be organized as:
- A single, named string value
- An object with groups of colors (e.g. to define swatches)
- An array of colors
Color bindings also work with Google Sheet Providers, by binding a Background to a cell that has a text following some color notation:
After choosing the Gradient option on the Inspector, use the little pencils on top of the picker to pick the colors that will compose your gradient.
Click on the pencil to add the 1st color and then click on the pencil on the right to add the second color.
You can also move (in a horizontal line) each pencil to make bigger or smaller the area that will cover each color.
By default, gradient backgrounds move from the top to the bottom of an element, transitioning between the first color value and the second. This direction, however, may be changed with the use of a degree value stated.
You can set an image as a background for your full-screen graphics or for example if you have already created your lower thirds as images you can upload them.
- Animated GIF
Image max size you can upload is 5MB
Background Image properties
The background image will scale until it gets contained on the Element’s Width or Height, keeping its original proportions and not cropping.
Transparent bands may appear if the image and the Element’s proportions are different. Those areas may be filled using the tiling options.
The background will scale until it covers the entire Element’s area, keeping its original proportions, but getting cropped if needed. You can use the position controls to move that cropping window.
The image will stretch to fully cover the entire Element area, losing its natural proportions. This will be especially noticeable when there are big differences between the aspect ratios of the Element and the image.
No repetition or positioning adjust is possible in this mode.
The image will be displayed on its original width and height in pixels.
If it’s bigger than the Element it will get cropped, and if it’s smaller it will leave transparent areas, that can be then filled with tiling.
Keep in mind that when using an image on its natural size, it will look bigger or smaller depending on the Graphics’ screen size (also set in pixels).
Allows you to set if an image is repeated. It works only with Fit and Natural Size. If you select one of those size options, you can choose to repeat it:
Horizontally (Tile X)
Vertically (Tile Y)
Both directions (Tile)
Allows you to set where the Background Image is placed. This option is not available for Image Size: "Stretch".