┌──────────────────────────────────────┐
│div {                                                                       │
│    background-image    :url("画像ファイル");                               │
│    background-size     :contain;                                           │
│    background-repeat   :no-repeat;                                         │
│}                                                                           │
└──────────────────────────────────────┘
但し、縦横比は維持。

┌──────────────────────────────────────┐
│div {                                                                       │
│    position            :absolute;                                          │
│    top                 :50%;                                               │
│    left                :50%;                                               │
│    height              :16px;                                              │
│    width               :160px;                                             │
│    margin-top          :-8px;                                              │
│    margin-left         :-80px;                                             │
│                                                                            │
│    font-size           :16px;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│div {                                                                       │
│    position            :absolute;                                          │
│    top                 :50%;                                               │
│    left                :0;                                                 │
│    height              :16px;                                              │
│    width               :100%;                                              │
│    margin-top          :-8px;                                              │
│                                                                            │
│    font-size           :16px;                                              │
│    text-align          :center;                                            │
│}                                                                           │
└──────────────────────────────────────┘

tableタグのなどで、(tdの)列を可変とした場合、
末尾の方に長い文字の行があると、初期表示から列幅が拡大する場合がある。

ちょっと見栄えが悪いので、その対策。

CSSの「visibility」属性の初期値を「hidden」(非表示)としておき、
裏で組み立てを完成させ、JavaScriptの「onload」の最後で
「visible」(表示)すればよい。

jQueryを使っているならばこんな感じとなる(CSSの定義とjQuery)。
┌──────────────────────────────────────┐
│table {                                                                     │
│    visibility          :hidden;                                            │
│}                                                                           │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $('table').css('visibility', 'visible');                                │
│});                                                                         │
└──────────────────────────────────────┘

┬──────────────────────────────────────┬
│概要                                                                        │
┴──────────────────────────────────────┴
  tableタグの場合、既定だと余白が開いてしまう
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  ├────────────────────────────────────┤
  │<table>                                                                 │
  │  <tr><td>■</td><td>■</td></tr>                                       │
  │  <tr><td>■</td><td>■</td></tr>                                       │
  │</table>                                                                │
  ├──────────────────┬─────────────────┤
  │「border-collapse:separate;」の場合 │┌──────┐                  │
  │                              (既定)││┌─┐┌─┐│                  │
  │                                    │││■││■││                  │
  │                                    ││└─┘└─┘│                  │
  │                                    ││┌─┐┌─┐│                  │
  │                                    │││■││■││                  │
  │                                    ││└─┘└─┘│                  │
  │                                    │└──────┘                  │
  ├──────────────────┼─────────────────┤
  │「border-collapse:collapse;」の場合 │┌─┬─┐                        │
  │                                    ││■│■│                        │
  │                                    │├─┼─┤                        │
  │                                    ││■│■│                        │
  │                                    │└─┴─┘                        │
  └──────────────────┴─────────────────┘
┬──────────────────────────────────────┬
│既定とは                                                                    │
┴──────────────────────────────────────┴
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
  上記を記述した場合、下のような既定パラメータが付加される感じになる
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :2px 2px;                                           │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │    padding         :1px 1px;                                           │
  │}                                                                       │
  └────────────────────────────────────┘
┬──────────────────────────────────────┬
│collapse                                                                    │
┴──────────────────────────────────────┴
  「separate」の余白を削りまくっても「collapse」になるわけではない
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :0;                                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
    ┏━┳━┓                                                    ┌───  
    ┃■┃■┃太線のようになってしまう                            │  │  │
    ┣━╋━┫これは二重線だからだ          これを回避するためには│─┘─┘
    ┃■┃■┃                          右のように分担させればよい│  │  │
    ┗━┻━┛                                                      ─┘─┘
  つまり、これが「collapse」である
  ┌────────────────────────────────────┐
  │table {                                                                 │
  │    border          :1px solid #000000;                                 │
  │    border-collapse :collapse;                                          │
  │}                                                                       │
  │td {                                                                    │
  │    border          :1px solid #000000;                                 │
  │}                                                                       │
  ├────────────────────────────────────┤
  │table {                                                                 │
  │    border-top      :1px solid #000000;                                 │
  │    border-left     :1px solid #000000;                                 │
  │    border-collapse :separate;                                          │
  │    border-spacing  :0;                                                 │
  │}                                                                       │
  │td {                                                                    │
  │    border-bottom   :1px solid #000000;                                 │
  │    border-right    :1px solid #000000;                                 │
  │}                                                                       │
  └────────────────────────────────────┘
┬──────────────────────────────────────┬
│文字自体の余白(文字の下の余白)                                              │
┴──────────────────────────────────────┴
  「font-size:16px;」と指定しても、実際には縦幅だけ「17px;」となる場合がある
  これは「g、j、p、q、y」といったベースラインを下にはみ出る文字への対策として
  下に「padding」より内側の余白が付加されるイメージだ
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  以下のように指定すれば、上記が解消される
  ┌────────────────────────────────────┐
  │* {                                                                     │
  │    line-height         :100%;                                          │
  │}                                                                       │
  └────────────────────────────────────┘
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  画像についても同様に下余白が付く場合がある
  これは以下のように指定すれば解消できる
  ┌────────────────────────────────────┐
  │img {                                                                   │
  │    vertical-align      :bottom;                                        │
  │}                                                                       │
  └────────────────────────────────────┘
────────────────────────────────────────

・構成要素の中に「overflow:hidden;」が混じっていると
  印刷時に切れてしまう恐れがあるので、全体を表示したければ
  印刷用CSS上は「overflow:visible;」に上書するとよい

・「@page {size:landscape;}」の指定を行うと
  自動で用紙が「横」指定となるらしいが、Chromeしか効かない

・「body {zoom:50%;}」の指定を行うと全体を縮小して印刷する(値は任意)が
  これは昔のIE(IE7以前など)の専門仕様だったらしい
  ところが、IE8以降は効かないに対して、Chromeにはなぜか効いてしまう

・IEとFirefoxは「縮小して全体を印刷」的なことが既定となっているが、
  IEでは一部の場合、全体を誤認してしまい、末尾を切らしてしまう場合がある
  一方、Chromeの既定では縮小なし表示の模様

「@media print {}」で囲った中で定義してあげると、印刷時のみ有効となるCSSになる。
┌──────────────────────────────────────┐
│@media print {                                                              │
│    div#header {                                                            │
│        display             :none;                                          │
│    }                                                                       │
│    div#main {                                                              │
│        top                 :0;                                             │
│    }                                                                       │
│    .noprint {                                                              │
│        display             :none !important;                               │
│    }                                                                       │
│    div#print {                                                             │
│        display             :block;                                         │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘
直接その要素を(印刷時だけ)変更する方法をとる場合には、
そのセレクタを指定して定義すればよい.
上記でいえばヘッダ(div#header)を非印刷にして、
本体(div#main)をその分繰り上げている。(「position:absolute;」の場合)

また、印刷専用クラス(.noprint)を仕込んでおき、
印刷時だけ活躍させる手もある。(「!important」を付けて優先度を高めた方が安全)

非印刷とは逆に、印刷専門項目(div#print)について非表示で隠しておき、
印刷の時だけ出力させるという手法もとれる。


なお、「@media print {}」については外部ファイル指定の代替案もあり。

CSS的には以下の通り。
┌──────────────────────────────────────┐
│body {                                                                      │
│    -webkit-transform   :scale(0.5);                                        │
│    -moz-transform      :scale(0.5);                                        │
│    -o-transform        :scale(0.5);                                        │
│    transform           :scale(0.5);                                        │
│}                                                                           │
└──────────────────────────────────────┘

jQueryに応用すると、以下のような感じ。(あ、ハッシュ化できそう)
┌──────────────────────────────────────┐
│$('body').css('-webkit-transform','scale(0.5)');                            │
│$('body').css('-moz-transform'   ,'scale(0.5)');                            │
│$('body').css('-o-transform'     ,'scale(0.5)');                            │
│$('body').css('transform'        ,'scale(0.5)');                            │
└──────────────────────────────────────┘

「z-index」が低め(他を高くする)の「img」タグを、
「position:fixed;」で固定表示するという回避策もある。

但し、「position:fixed;」は「position:absolute;」と違って、
親を持つことができない。

よって、センタリングした領域とかに配置するのは難しい。
こんな感じになる。
┌──────────────────────────────────────┐
│div {                                                                       │
│    position            :relative;                                          │
│    width               :640px;     /* ① */                                │
│    margin              :auto;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│img.left {                                                                  │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    left                :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-left         :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
│img.right {                                                                 │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    right               :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-right        :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
└──────────────────────────────────────┘

CSS3では、カンマ区切りで指定すれば、
二つ以上の画像を背景画像として配置することができるようになった。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background          :url("左画像.png") no-repeat  5% center,            │
│                         url("右画像.png") no-repeat 95% center;            │
│}                                                                           │
└──────────────────────────────────────┘
上記は画面中央の左端と右端に画像を配置した例。

ちなみに「background」プロパティは、「background-image」プロパティなど
いくつかの「background」系プロパティをまとめたものだが、
プロパティごとに指定する場合には、それぞれの順番を合わせればよい。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background-image    :url("左画像.png"),                                 │
│                         url("右画像.png");                                 │
│    background-repeat   :no-repeat,                                         │
│                         no-repeat;                                         │
│    background-position : 5% center,                                        │
│                         95% center;                                        │
│}                                                                           │
└──────────────────────────────────────┘

背景画像を二つ以上配置するにはどうすればよいか？

結論からいうとCSS(CSS3の前)では、実現できない。
一つの領域に一つの背景画像となる(もしくは背景画像なし)。

なので、一つの領域に見せかけ、実は二つ以上の領域に分割し
そこでおのおのに背景画像を配置するような方法を採ることになる。