knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

背景色や背景画像も印刷したい

ブラウザのもつ印刷機能では、デフォルトで背景色や背景画像を印刷しないことになっています。

画像をHTML上に直書きするのも一つの手段ですが、セマンティックなHTMLドキュメントを書こうとするとどうしても限界があります。

IEの各バージョン / Firefox / Opera ではブラウザ側の設定で印刷が可能ですが、ユーザー側の設定に関わらず必ず印刷させたい場合があります。

そんなときは、webkit系でのみ下記スタイル指定によって可能となります。

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}