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

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

How to: CSS Large Background

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

一枚の画像を使用する方法のイメージ図

demo

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

サンプルコード

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

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

二枚の画像を使用する方法のイメージ図

demo

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

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

画像の背景を背景画像として使用する方法<のイメージ図

demo

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

sponsors

top of page

©2018 coliss