Background property group

The group of background properties is used to change backgrounds of windows, containers, and widgets.

Do not confuse background properties with image properties: Background properties are used to change the background appearance of a window, container, or widget; whereas image properties are used to add and change appearance of foreground images.

Element background can be changed both in Lycia Form Designer and in Lycia Theme Designer. However, we recommend applying background properties via user themes created in Lycia Theme Designer.

Form XML code:

<element_name.background>

   <Background>

      <...>

   </Background>

</element_name.background>

Theme property filter XML code:

<ElementFilter ElementName="element_name">

  <StyleSheet>

    <DoStyleAction>

      <SetProperty>

        <PropertyPath>

          <PropertyName>Background</PropertyName>

        </PropertyPath>

        <PropertyValue type="Background" />

      </SetProperty>

    </DoStyleAction>

  </StyleSheet>

</ElementFilter>

Inheritance diagram:

Associated containers, widgets and theme elements:

Background property group includes:

New Background

Fill Color / fillColor (in Lycia Form Designer)

Background Image / backgroundImage

Background Style / backgroundStyle

Size / size

Location / location

Fill Color and Background Image properties can be applied separately or together.

Below you can see the Design Area with all font properties added (different variants are provided):

At runtime, you can use css styles to change the element's background:

.qx-aum-toolbar-button .ui-button-text {

    background:yellow

}

Related articles:

Image property group