[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例

Post on:2008年10月20日

一枚の画像を使用する方法

実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。

サンプルコード

<textarea name="code" class="css" cols="60" rows="5">
body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
  width: 100%;
  display: table;
}
</textarea>

body {

padding: 0;

margin: 0;

background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

width: 100%;

display: table;

}

</textarea>

最後の２行は、Firefoxなどでブラウザのサイズを小さくした際の対応だそうです。

二枚の画像を使用する方法

demo

実装のポイントは、繰り返す画像（コルクボードの画像）は同系色（茶色）で構成されたものを使用し、透過画像を重ねて使用します。

画像の背景を背景画像として使用する方法

demo

実装のポイントは、メインの画像の背景のみを水平方向に繰り返す背景画像（background image）として使用します。
メインの画像はdiv（#wrapper）などの背景画像に指定します。
背景画像（background image）の終点と同じ色を背景色（background color）にします。