Background

Background

Info

In a nutshell
Background controls what appears behind an element's content, either a solid color fill or an image. You can choose from preset color palettes, enter a custom hex value, or upload an image to fill the element's surface.

1. Description

Background defines the visual surface of an element*link to elements page*, the fill that sits behind its content, inside the element's boundary. A well-chosen background helps an element stand out, blend in, or carry visual weight on the page. The default value for background No Fill which means the element is transparent and shows whatever is beneath it.

  

2. Possible values

Background has two properties within the accordion:

  1. Background color
  2. Background image

These properties are independent and can be set together.

Background color

ValueHow it works
No FillThe element will have no background color and will remain fully transparent.
StandardYou can pick from Document Colors, Standard colors, or Monochrome colors.
CustomYou can enter a hex or RGB code directly for a precise color value.

Background image

ValueHow it works
UploadSelect an image from your local storage or the asset library to fill the element's surface.

Ideal for: When the element's background should carry a photo, pattern, texture, or branded visual.

NotesNote: When an image is added to the portal page or within a stack or canvas, you can choose if it should fill, fit, stretch or display as repeated tiles within them.
NotesNote: When both a background color and a background image are set, the image renders on top of the color. Therefore, the color shows through any transparent areas of the image.

3. How to set background?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Background accordion within the pane.
  3. Set background color:
    1. Click the color picker and choose a color from the Standard or Custom tab. The default option chosen will be No Fill.
  4. Set background image if required:
    1. Click the image upload property below the color field.
    2. Select an image from Stock Images or upload one from your local storage.
  5. Click Save in the top right corner to ensure the changes are retained.

4. Applicable elements

Background is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image (Only background color is applicable)
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Tab
  9. Button
  10. Portal Forms
  11. Embed

5. Points to note

  1. Background color and background image relationship - When both background color and image are applied, the image renders over the color. This can be used to add a color overlay effect behind a semi-transparent image.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Margin
  5. Font
  6. Corner Radius
  7. Border
  8. Shadow
  9. Opacity
  10. Image and icon styling
  11. Tab styling
  12. Stack