This page is for application designers who want to add company or project branding to an application.

How to Load and Use an Image

You can add your own images so that your applications can display company logos and banner backgrounds.

To add an image:

1. Go to the repository → Application → Images.
2. Right-click and select 

   Insert excerpt
   _new _new nopanel true

   .  PhixFlow opens the image properties, where you can upload the image.
3. Click 

   Insert excerpt
   _finish _finish nopanel true

   .

To use an image:

1. Open the properties for the component in which you want to use an image.
2. In Style Settings → Background Image, select the image from the drop-down list; see Component → Background Image.
   The drop-down list includes all images available in the full repository. To see the images uploaded to the repository for the current application, click 

   Insert excerpt
   _image_list _image_list nopanel true

   .

3. Set other options for the image, see Component → Style Settings. 

   Tip
   By default, PhixFlow repeats a small image or icon to fill the available background space. To use a small image as a single icon, change Background Repeat to no-repeat.

   
   

4. Click 

   Insert excerpt
   _finish _finish nopanel true

   .

To use an image as an icon to represent the component in a palette:

1. Open the properties for the component in which you want to use an image.
2. In Advanced → Internal Icon Source, select the image from the drop-down list; see Layout → Internal Icon Source  for details.
3. Click 

   Insert excerpt
   _finish _finish nopanel true

   .

For information about how to use an image stored on the PhixFlow server, see Using a URL to Display an Image.

Image Sizing 

Anchor
imagesize imagesize

Use the CSS Properties Reference Information to size an image. For a background image, the background-size can be:

• auto: the background image is displayed in its original size.
• length: sets the width and height of the background image, for example, 20px 20px.
  • The first value sets the width.
  • The second value sets the height.
  • If only one value is given, the second is set to 'auto'.
• percentage: sets the width and height of the background image in percent of the parent component, for example 100%.
  • The first value sets the width
  • The second value sets the height.
  • If only one value is given, the second is set to 'auto'.
• cover: resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off.
• contain: resize the background image to make sure the image is fully visible.
• initial: sets this property to its default value.
• inherit: inherits this property from its parent component.

Getting an image to display correctly is a process of trial and error. The exact settings depend on the image size and how you want it to appear in your application. We recommend that you aim to make the image responsive on different screens using the options percentage, cover or contain. However, this can be ignored if you know your image will only be used in one form factor and you are having problems with it becoming distorted.

Here are some possible locations for images, and suggestions for which options to use to control the image size.

Image Properties

Basic Settings