« ＣＳＳテンプレート | メイン | ＷＥＢデザイン関連 »
media="printを指定したら、印刷時に背景が出力されない。
#header{
margin: 0px;
padding: 0px;
height: 170px;
width:864px;
background: url(.images/header.jpg) no-repeat;
}
print.cssのこの部分を修正！
#header{
margin: 0px;
padding: 0px;
height: 170px;
width:864px;
display:list-item;
list-style-image: url(images/header.jpg);
list-style-position: inside;
}
印刷用 CSS の指定で該当箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定する、という事らしい。
参考：
ブロックレベル要素とインライン要素の比較
| ブロックレベル要素 | インライン要素 | |
|---|---|---|
| 高さ(height) | 指定可 | 指定不可 |
| 幅(width) | 指定可 | 指定不可 |
| 左右のマージン(margin) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のパディング(padding) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のボーダー(border) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 上下のマージン(margin) | 要素の上下に存在 | 無視され、レイアウトに影響は無い |
| 上下のパディング(padding) | 要素の上下に存在 | 全ての行に存在し、ボーダーの位置に影響が出る |
| 上下のボーダー(border) | 要素の上下に存在 | 各行に存在するが、他の行に重なる場合がある |
これらはCSS2でdisplayプロパティを使えば変更可能。
display: inline;, display: block;とすれば、 それぞれインライン要素、ブロックレベル要素として表示され、 マージンの適用方法等もdisplayプロパティに合わせられる。
【MEMO：01】
ブラウザの高さにあわせて背景を表示させたい場合
スタイルシートに
html,body{
height:100%;
}
【MEMO：02】
body > #container {
height: auto;
