Using background images and effects on HTML items

Freeway 5 can apply background effects to HTML items. This allows you to set graphic effects on HTML items that are similar to those that can be applied to graphic items. You can use this feature to create HTML boxes with translucent backgrounds, borders, glows, and shadows. HTML background effects are output as sliced background images. You can also choose a background image in addition to a background effect, in which case the background image will be composited with the effect and sliced.

To apply a background effect to an HTML item:

  1. Select the item.
  2. Change to the Appearance pane of the Inspector palette.
  3. Choose a background effect from the Graphic Effects section.

Sliced Background Images

Freeway 5 has an option for slicing background images so that they can be used to apply a border or effect to an HTML item. This allows you to create HTML boxes with decorative borders, or shadows, or translucent backgrounds etc.
To create a sliced background image, you will normally want to use an image that has a framed border and a uniform central area, which may be transparent or semi-transparent. Freeway 5 also provides customizable background effects which will automatically generate a sliced background image.

To create a sliced background image:

  1. Select an HTML item
  2. Change to the Appearance pane of the Inspector palette
  3. Choose a suitable background image using the Image popup in the Background section
  4. Check the Slice Image checkbox
When you resize an item with a sliced background, you will see that the background resizes automatically. This also happens when the item is viewed in a browser.