CSS に背景画像を追加する
このチュートリアルでは、CSS で背景画像を追加する方法を紹介します。また、背景画像を追加する際のよくある間違いについても説明します。
画像と CSS ファイルが同じフォルダにある場合に CSS に背景画像を追加する
background-image プロパティを使用して、CSS で画像を背景にすることができます。次に、値として、画像名または画像パスがパラメータである url() 関数を使用できます。CSS で body タグを選択した後、プロパティを書き込む必要があります。これにより、Web ページ全体の背景画像が有効になります。HTML、CSS、画像ファイルのフォルダ構造に従って画像名とパスを書く必要があります。HTML ファイルと CSS ファイルに関してさまざまな画像の場所のいくつかのシナリオを説明します。
画像と CSS ファイルが同じディレクトリにある場合は、url() 関数に画像名を書き込むだけです。たとえば、ディレクトリに画像 bird.jpg があります。同じディレクトリに CSS ファイル style.css があります。次のコードは背景画像を設定します。
サンプルコード：
body{
background-image:url(bird.jpg);
}
さらに、HTML ファイルと CSS ファイルの相対ファイルパスが正しいことを確認する必要があります。CSS が内部で HTML で記述されている場合、画像ファイルと HTML ファイルは同じディレクトリ内にある必要があります。それらが同じディレクトリにない場合、CSS ファイルの相対パスは HTML ファイルで正しいはずです。
画像、HTML、CSS ファイルが別のフォルダにある場合に CSS 画像に背景を追加する
index.html という名前の HTML フォルダー、style.css という名前の CSS ファイル、および bird.jpg という名前の画像があると仮定します。HTML ファイルは html フォルダーにあり、CSS ファイルは css フォルダーにあり、画像は image フォルダーにあります。このようなファイル構造では、背景画像が表示されるように、CSS ファイルと画像の相対パスをどのように指定するかを知っておく必要があります。まず、HTML ファイルと CSS ファイルがリンクされていることを確認する必要があります。次のコードは、HTML ファイルと CSS ファイルを上記のフォルダー構造にリンクします。
サンプルコード：
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
../記号は、現在のフォルダから 1 ステップ戻ることを示します。index.html が存在する html フォルダーから一歩戻ると、css フォルダーが存在する親フォルダーに到達します。次に、css フォルダー内に style.css ファイルがあります。ここで、CSS ファイルで同じ方法で bird.jpg の相対パスを指定する必要があります。
image フォルダーは現在の CSS ファイルから 1 ステップ後ろにあるため、../は親フォルダーに戻ります。次に、bird.jpg が存在する image フォルダをフェッチします。したがって、CSS で背景画像を欠陥なく設定できます。
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn