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

Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。

How to: CSS Large Background

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

demo

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

サンプルコード

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
  width: 100%;
  display: table;
}

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

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

demo

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

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

demo

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

Post on:2008年10月20日