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

投稿日: 2022-04-20 2022-10-21
タグ: html, Spin Up

このチュートリアルでは、 <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ピクセルまで。これにより、上部の上部の間に80ピクセルのスペースが作成されます。 <div> 要素とその中に配置するコンテンツ。の効果を確認することはできませんのでご注意ください padding-top 次のステップでコンテンツを内部に配置するまで値を設定します。

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

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

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

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

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

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

style =“ margin：0;” >>

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

これで、を追加する方法を知っているはずです。 <div> Webページの上部を構成するための背景画像を含むコンテナ。

getdocs

13036