HTMLを使用してWebページの上部に背景画像を追加する方法

このチュートリアルでは、<div>コンテナを使用してWebページの上部を構成する方法を学習します。 style属性を使用して、<div>コンテナの高さを指定し、背景画像を適用し、背景画像が<div>コンテナの全領域をカバーするように指定します。。

始める前に、背景画像が必要です。チュートリアルの目的で、デモサイトの背景画像をダウンロードして使用するか、新しい画像を選択することができます。（HTMLを使用してWebページに画像を追加する方法の復習については、このチュートリアルシリーズの前半のチュートリアル HTML画像にアクセスしてください）。

背景画像を選択したら、その画像をimagesフォルダーにbackground-image.jpgとして保存します。

次に、強調表示されたコードスニペットをindex.htmlファイルの開始<body>タグの下、終了</body>タグの上に貼り付けます。

. . .
<body>
<!--First section-->
  <div style="background-image: url('Image_Location'); 
  background-size: cover; height:480px; padding-top:80px;">
  </div>
</body>
...

Image_Locationというテキストを画像のファイルパスに切り替えて、終了</div>タグを追加することを忘れないでください。

HTMLコードの整理に役立つコメントを追加したことに注意してください。コメントは、ブラウザによって無視されるコードの一部です。コメントは、開発者にコードを説明または整理するために使用されます。これらは、開始タグで作成されます。

また、heightを480ピクセル、padding-topを80ピクセルに指定しました。これにより、<div>要素の上部と内部に配置するコンテンツの間に80ピクセルのスペースが作成されます。。次の手順でコンテンツを内部に配置するまで、padding-top値の効果を確認できないことに注意してください。

ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

または、背景画像の代わりに背景色を使用することもできます。背景色を使用するには、作成した<div>要素コードスニペットを、次のように強調表示された<div>要素コードスニペットに置き換えます。

. . .
<body>
  <!--First section-->
  <div style="background-color: #f4bc01; height:480px; padding-top:80px;"> 
  </div>
</body>
...

ファイルを保存し、ブラウザにリロードして結果を確認します。これで、背景画像を同じサイズで黄色の単色のコンテナに置き換える必要があります。

サイトの<div>コンテナをデモンストレーションサイトの同じ<div>コンテナと比較すると、Webページの<div>コンテナが囲まれていることがわかります。わずかな余白があります。このマージンは、すべてのHTMLページがデフォルトで小さなマージンを持つように自動的に設定されているためです。

この余白を削除するには、HTMLページの<body>要素の余白を0ピクセルに設定するスタイル属性を開始<body>タグに追加する必要があります。 index.htmlファイルで開始<body>を見つけ、強調表示されたコードで変更します。

style =“ margin：0;” >>

ブラウザにファイルを保存してリロードします。これで、上部の<div>コンテナの周囲に白い余白がなくなるはずです。

これで、<div>コンテナを背景画像とともに追加して、Webページの上部を構成する方法を理解する必要があります。