Background Options for Graphics

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

  1. Select the element from the tree or canvas
  2. Look for the background section on the Inspector on the right side of the editor. 
  3. Choose the background type you want to use.

Element backgrounds can be a solid color, color bindings, a gradient, or an image.

Solid Color

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. 

Color bindings

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:

  1. A single, named string value
  2. An object with groups of colors (e.g. to define swatches)
  3. 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:


Gradient

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.


Image

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. 

Supported formats

  • PNG
  • SVG
  • Animated GIF
  • JPG

Max Size

Image max size you can upload is 5MB

Background Image properties

Size

Fit

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. 

Fill

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. 

Stretch

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.

Natural size

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).

 

Tile

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)

Position

Allows you to set where the Background Image is placed. This option is not available for Image Size: "Stretch".

Was this article helpful?