2011.03.25 | 

こんにちわ
devjamのコータローです。

Webサイトを印刷対応にする時、印刷用CSSで
最適化すると思います。

ところが、背景を印刷する場合、ブラウザで背景を印刷する設定をしていないと印刷されない(デフォは設定OFF)
また印刷用に別のヘッダー画像とかを用意する場合(横幅を小さくするなど)うまく印刷されない。

そんな時の技を紹介します。

印刷用CSSで背景を指定したい箇所に
display:list-item;
をあて
list-style-imageで背景画像を指定します。

具体例

<br />
#hoge {<br />
  display: list-item;<br />
  list-style-image: url(hogehoge.jpg);<br />
  list-style-position: inside;<br />
  letter-spacing: -1000em;<br />
  font-size: 1pt;<br />
}<br />

これで背景も印刷されます。