印刷用CSSで背景画像を印刷する方法

Webサイトを印刷対応にしたい場合、印刷用cssを用意して
印刷用に最適化する。
通常背景を印刷する場合はブラウザの設定で背景も印刷する
に設定されていないとできない。

なんとかしたいと思って調べた対応策をメモひらめき電球
デモはこちら


まず
cssのメディアタイプをprintにする。
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">

cssで対象となる箇所を
display:list-item;

にする。そして
list-style-image

に印刷したい画像を指定する。

Lucky bag::blog: 印刷用 CSS で背景画像を印刷させる方法
※以下引用
こんな感じ
h1#head {
  color: #fff;
  display: list-item;
  list-style-image: url(head_bg.png);
  list-style-position: inside;
  letter-spacing: -1000em;
  font-size: 1pt;
}


CSSで背景画像を印刷させる別の方法
[CSS]背景に指定した画像を印刷させる方法
通常用CSSと印刷用CSSに分けて、通常はimgタグを非表示して
印刷のときは背景画像を使ってる場所を非表示にして画像を
表示させる。
HTML
<h1 id="logo">Site Name</h1>
<img src="images/logo.gif" class="nodisplay" />

Screen CSS
h1#logo{
  background: url(images/logo.gif); height: 75px; width: 137px; text-indent: -9999px; 
}

img.nodisplay{
  display: none;
}


Print CSS
h1#logo{
  display: none;
}

img.nodisplay{
  display: block;
}



ホームページの印刷方法としてjQueryを使うと
簡単に指定した範囲の箇所を印刷させることができます。
jQueryで印刷範囲を指定して印刷対応させる