背景画像を印刷する方法

Author: kotaro

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

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

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

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

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

具体例

[code lang=”css”]
#hoge {
display: list-item;
list-style-image: url(hogehoge.jpg);
list-style-position: inside;
letter-spacing: -1000em;
font-size: 1pt;
}
[/code]

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