9–1–1 背景の色

プロパティbackground-colorは背景の色を指定する。

次は本文区画とfo:blockのそれぞれに0.5em幅のマージン、ボーダー（破線）、パディングを設定した。

<fo:simple-page-master …略… >
  <fo:region-body margin="…略…" 
                  background-color="#EEEEEE" 
                  border="0.5em dashed black" 
                  display-align="center"/>
</fo:simple-page-master>       
  …略…
<fo:page-sequence master-reference="PageMaster">
  <fo:flow flow-name="xsl-region-body"> 
    <fo:block background-color="#BBBBBB" 
              margin="0.5em" 
              padding="0.5em" 
              border="dashed 0.5em #666666">
            背景色#BBBBBB
      <fo:block background-color="transparent" 
                margin="0.5em" 
                padding="0.5em" 
                border="dashed 0.5em #888888">
              背景色transparent
        <fo:block background-color="#DDDDDD" 
                  margin="0.5em" 
                  padding="0.5em" 
                  border="dashed 0.5em #999999">
                背景色#DDDDDD
        </fo:block>
      </fo:block>
    </fo:block> 
  </fo:flow>
</fo:page-sequence> 

組版結果を図9･1 背景の範囲・色に示す。図で一番外側の破線は本文区画の周囲に付いている(本文区画のボーダーはXSL-FO V1.1では幅ゼロでなければならないので、太さを評価するのはAH Formatterの拡張である。)。また、その内側の背景は本文区画の背景であり、外から二つ目の破線が最も外側のブロックのボーダーである。マージンとボーダーは背景の対象にならず、背景色を透明にすると一つ内側のブロックのカラーになることが確認できる。

9–1–2 背景の画像

プロパティbackground-imageは背景の画像を指定する。

9–1–3 背景画像の固定・移動

プロパティbackground-attachmentは背景画像を固定にする（fixed）か移動する（scroll）かを指定する。

次は、単純ページマスターと本文区画の周囲にそれぞれ5mm（合計10mm）のマージンを設定し、その中のfo:blockに背景画像を指定した。上は背景画像を固定、下は移動に設定した。

<fo:simple-page-master margin="5mm 5mm 5mm 5mm" 
                       master-name="PageMaster1"
                       page-height="80mm" 
                       page-width="100mm">
<fo:region-body margin="5mm 5mm 5mm 5mm" 
                background-color="#EEEEEE"/>
</fo:simple-page-master>  
…（省略）…
<fo:block background-image="url('image-for-background2.png')" 
          background-attachment="fixed" 
          margin="0.5em" 
          background-repeat="no-repeat" 
          border="0.1pt gray solid">
          …空白（省略）…
</fo:block>   
<fo:block background-image="url('image-for-background2.png')" 
          background-attachment="scroll" 
          margin="0.5em" 
          border="0.1pt gray solid" 
          background-repeat="no-repeat">
          …空白（省略）…
</fo:block>

組版結果は図9･2 背景画像の固定・移動のようになる。固定のときは左のように背景画像は単純ページマスターの左上隅を基準に配置される。移動のときは右のようにブロックのボーダーを基準に配置される。

9–1–4 背景の繰り返し

プロパティbackground-repeatは背景の繰り返しを指定する。

次は、上から順に、初期値（水平・垂直方向繰り返し）、背景の水平方向繰り返し、背景の垂直方向繰り返しを指定した。結果は図9･3 背景の繰り返しに示す。

<fo:block background-image="url('image-for-background4.png')" 
          border="dashed 0.2em #666666">
          margin="0.5em" 
          …空白（省略）…
</fo:block>
<fo:block background-image="url('image-for-background4.png')" 
          background-repeat="repeat-x" …省略…>
          …空白（省略）…</fo:block>
<fo:block background-image="url('image-for-background4.png')" 
          background-repeat="repeat-y" …省略…>
          …空白（省略）…
</fo:block>

9–1–5 背景の水平位置

プロパティbackground-position-horizontalは背景の水平位置を指定する。

9–1–6 背景の垂直位置

プロパティbackground-position-verticalは背景の垂直位置を指定する。

次は、上から順に、背景の繰り返しなしで位置を水平位置中央、背景の繰り返しなしで水平位置30%、背景の繰り返しなしで垂直位置50%を指定した。結果は図9･4 背景の位置に示す。

<fo:block background-image="url('image-for-background4.png')" 
          background-position-horizontal="center" 
          background-repeat="no-repeat" …省略…>
          …空白（省略）…
</fo:block>
<fo:block background-image="url('image-for-background4.png')" 
          background-position-horizontal="30%" 
          background-repeat="no-repeat" …省略…>
          …空白（省略）…
</fo:block>
<fo:block background-image="url('image-for-background4.png')" 
          background-position-vertical="50%" 
          background-repeat="no-repeat" …省略…>
          …空白（省略）…
</fo:block>