9.6 Backgrounds

9.6.1 Displaying backgrounds

Properties control the background colors and images of areas.

• background- color :

  • is either transparent, to show through the parent area background (default), or a specified color;

• background-image :

  • is a URI of the image to render as the background;

• background-repeat :

  • either repeatedly renders the background image in both directions in the "x" direction (horizontal left to right according to the reference orientation) and in the "y" direction (vertical top to bottom according to the reference orientation) or renders it only once;

• background-position-horizontal :

  • is the position of the background image in the horizontal direction (left to right according to the reference orientation);

• background-position-vertical :

  • is the position of the background image in the vertical direction (top to bottom according to the reference orientation);

• background-attachment :

  • specifies whether a background image scrolls in synchronization with the scrolling of an object or, if the presentation is electronic, the background image is fixed in place and the object's content scrolls over the fixed background.

An area's background is always within its padding rectangle, as shown in Figure 9-8.

• Any gaps in a border that is not solid (e.g. a dotted border) are transparent and will show through the parent area background.

Figure 9-8. Background visibility

Precedence is given to the contained areas.

• A child area's background shows on top of an area's background.

• An area's background shows on top of its parent's background.

9.6.2 Decorating page columns using a background

Consider the need to decorate columns of a page.

• There are no properties to decorate the normal-flow reference area of a column.

• You can create an image of the decoration for the background of the entire page.

  • For a single column, you could center a narrow image of just the decoration

    • such as a simple vertical line.

  • For multiple columns, you could create a page-wide graphic with strategically placed decorations.

• The graphic of the decoration can be repeated for the entire page.

• This scheme does not work for a portion of the page, only for the entire page.

Example 9-3 shows excerpts from Figure 9-8.

Example 9-3 Keeping a group of areas together in a reference area

 Line 01 <region-body region-name="frame-body"       02              column-count="2" column-gap=".5cm"      03              background-position-horizontal="center"      04              background-repeat="repeat-y"      05              background-image='url(/books/1/247/1/html/2/vertical-line.bmp)'/>      06 ...      07 <block background-color="silver">This is a test</block>      08 ... 

Figure 9-9 shows the rendering of the background image apparently between the two columns.

Figure 9-9. A decoration between page columns

Of note:

• the silver background is used here only to illustrate the width of the columns on the page.