GHWEB06.GRASSHOPPER

CSS3 より、複数の背景画像を適用できるようになりました。無駄なDIVを作らなくて良いため、ソースがシンプルになります。
画像は、CSSで角に画像を其々配置した物のキャプチャです。

CSSの記述

ｃｓｓは下記のようになります。（htmlは省略）

#box {
  margin:0;
  padding : 0;
  border : 0;
  width : 250px;
  height: 250px;
  background: url(k1.gif) no-repeat left top,
              url(k2.gif) no-repeat right top,
              url(k3.gif) no-repeat left bottom,
              #222 url(k4.gif) no-repeat right bottom;
}

---

このようにCSSの指定だけで出来るんですが、IE8は非対応です。
対応させる場合、PIE.htc を利用します。
使い方は、css に behavior: url(PIE.htc); と -pie-background の記述の追加を行います。
只、PIE.htc のパスは、HTMLからPIE.htcへの相対パスでないと動きません。
画像のパスも同じく相対パスにします。

（例）
フォルダ構成を下記のようにして、

css、画像、 PIE.htc をimgフォルダに格納した場合のCSSは下記のようになります。
IE以外とIE8の場合でパスが違うので確認して見て下さい。

#box {
  margin:0;
  padding : 0;
  border : 0;
  width : 250px;
  height: 250px;
  /* other */
  background: url(k1.gif) no-repeat left top,
              url(k2.gif) no-repeat right top,
              url(k3.gif) no-repeat left bottom,
              #222 url(k4.gif) no-repeat right bottom;
  /* IE8 */
  -pie-background:url(img/k1.gif) no-repeat left top,
                  url(img/k2.gif) no-repeat right top,
                  url(img/k3.gif) no-repeat left bottom,
                  #222 url(img/k4.gif) no-repeat right bottom;
  behavior: url(img/PIE.htc);
}

（※IE8とchrome22・firefox15・safari に対応させた場合）

---

以上、CSSで背景画像を複数指定する場合にお試し下さい。