CSS で背景画像を設定する

1. CSS で background:url() を使用して背景画像を設定する
2. CSS で相対パス/image/picture を使用して背景画像を設定する
3. CSS で相対パス ../image/picture を使用して背景を設定する

この記事では、CSS で背景画像を設定する方法を紹介します。背景画像が正しく表示されるように画像のパスを設定する方法について説明します。さらに、さまざまな相対パスについて説明します。

CSS で background:url() を使用して背景画像を設定する

background プロパティを使用して、CSS で背景画像を設定できます。URL() 関数は、画像のファイルパスを背景画像として保持します。background プロパティは、背景に関連付けられている他のいくつかのプロパティの省略形です。これらのプロパティは、background-color、background-image、background-repeat、background-attachement、background-position の順です。background プロパティを使用すると、これらすべてのプロパティに簡単に値を割り当てることができます。

間違える可能性のある重要なポイントは、URL() 関数で画像のパスを書き込んでいるときです。画像の場所に注意する必要があり、URL() 関数に書き込まれるパスは CSS ファイルからの相対パスである必要があります。CSS を HTML ファイル自体に書き込む場合、パスは HTML ファイルからの相対パスである必要があります。

以下の例では、picture という名前の画像が image フォルダー内にあります。image フォルダーと次の CSS ファイル style.css は同じフォルダーにあります。したがって、次のコードは背景画像を設定します。

フォルダー構造を以下に示します。

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

サンプルコード：

body {
    background: url(image/picture);
}

CSS で相対パス/image/picture を使用して背景画像を設定する

/image/picture ファイルパス形式を使用して、CSS で背景画像を設定できます。このような形式では、画像は image フォルダ内にあります。image フォルダは、現在の Web のルートにあります。

以下の例では、画像画像を背景画像として設定しています。この形式では、CSS ファイルの場所は重要ではありません。CSS ファイルを基準にしたファイルパスを記述する必要はありません。ファイルパスは、現在の Web のルートを基準にして書き込まれます。これは、image フォルダがルートディレクトリにあることを意味します。

サンプルコード：

body {
    background: url(/image/picture);
}

CSS で相対パス ../image/picture を使用して背景を設定する

../表記を使用して、ディレクトリ構造の 1つのレベルに戻ることができます。../表記を使用して、CSS で背景を設定しながら、URL() 関数に相対ファイルパスを書き込むことができます。

たとえば、html フォルダに HTML ファイル test.html があります。html フォルダは web フォルダ内にあります。画像 picture は、web フォルダ内の image フォルダ内にあります。このようなディレクトリ構造では、次のコードを使用して背景を設定できます。

フォルダー構造を以下に示します。

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

以下の例では、CSS を HTML ファイル自体に記述しています。../表記により、html フォルダーから web フォルダーに戻ります。次に、image フォルダを見つけ、次に image フォルダ内の picture ファイルを見つけます。このようにして、相対パスを使用して CSS で背景画像を設定できます。

サンプルコード：

body {
    background: url(../image/picture);
}