img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

背景を複数指定


背景画像を複数指定する

  ie6 nn7 op8

背景として指定できる画像は1要素あたり一つなので、複数の背景画像を適用するために要素を重ねて複数表示
しているように見せる方法です。
背景画像の表示場所は任意の位置に変えることができます。
タイルタイプやボーダータイプの画像を好きな場所に表示したり、ポイント画像を任意の位置に表示する事ができるので
画像を背景にする場合でも違ったイメージになります。

背景画像の位置は、background-position:横方向 縦方向; で、プロパティの値は1つ、または2つです。
(デフォルトの値はページの左上端、0% 0% 。)
横方向の位置を左からの距離で、縦方向の位置を上からの距離で指定します。
2つの場合 1つ目の値が横方向、2つ目の値が縦方向を指定、 1つの場合 横方向の値と解釈され、
縦方向は中央に表示されます。
指定出来るのは
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等 です。


■ 背景画像を複数指定  sample1 sample2

例: サンプル1で表示しているものです。
以下のソースを、htmlソースの<head></head>で囲まれた部分に入れて下さい。


<body>〜</body>内に記述↓
<body>
<div id="bodyimage1">
<div id="bodyimage2">
〜 サイトに表示する内容 〜
</div>
</div>
</body>


例: サンプル2で表示しているものです。
以下のソースを、htmlソースの<head></head>で囲まれた部分に入れて下さい。


<body>〜</body>内に記述↓
<body>
<div id="bodyimage1">
〜 サイトに表示する内容 〜
</div>
</body>


上記ではbodyを含めて複数の画像を指定していますが、増やす場合はcssに #bodyimage○ を追加して
<body></body>内にも <div id="bodyimage○">〜サイトに表示する内容〜</div> を追加して下さい。