All Collections
Viz Flowics
Settings
Background Options for Graphics
Background Options for Graphics
Updated this week

Enhancing your design with customized backgrounds is easy! Follow these steps to add backgrounds to different elements:

  1. Select Your Element: Start by selecting the element you want to add a background to. You can do this by clicking on it in the tree or canvas.

    The elements that support a single or multiple backgrounds are:

    1. Regions

    2. Overlays

    3. Containers

    4. Rectangle

    5. Progress Bar

    6. QR Code

    7. Ticker

  2. Access Background Settings: Next, navigate to the Appearance section located in the Inspector panel on the right side of the editor and look for background. This is where you'll configure your background.

    Click 'Add' once for a single background. To add multiple backgrounds for the same element, click 'Add' as many times as you need.

  3. Choose Your Background Type: In the background settings, you'll find options for various background types:

    1. Solid Color: Choose a single color to fill the background.

    2. Color Bindings: Apply dynamic color bindings for a more interactive experience.

    3. Gradient: Create a gradient effect with two or more colors blending.

    4. Image: Upload an image to the Asset library to use as a background. Make sure it's relevant to your design.

  4. Customize Your Background: Depending on the background type you choose, you'll have additional customization options. For example, you can adjust the color values, direction of the gradient, or scaling of the 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:

  • Use 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

  • WEBP

Max Size

Image max size you can upload is 5MB

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

Title

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


Multiple Backgrounds

With the use of multiple backgrounds, you can add as many backgrounds as you need to a single element, achieving a better performance of the scene and a better appearance in your design without the need to keep adding individual elements to your tree.

  • You can incorporate as many backgrounds as necessary.

  • The order in which backgrounds are placed holds hierarchical significance, allowing for precise layering and visual control.

  • Solid colors and images can be bound. In order to bond them, it's necessary to have a data connector configured. If the connector hasn't been added, the option won't be available.


Did this answer your question?