background-imageの使い方[HTML&CSS]

background-imageの使い方

background-imageは、背景画像を設定する際に使用します。

以下の使用例をご覧ください。

HTML:

<div class="box">
 </div>

CSS:

.box {
  width: 500px;
  height: 500px;
  margin: 0 auto 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
}

ブラウザでの表示:

上記のように、『background-image: url(“〜”);』の〜に画像のパスを書きます。

このとき、”（ダブルクォーテーション）記号を忘れないようにしましょう！

また、background-sizeを指定することで、画像のサイズを変更することができます。

background-sizeに関して、詳しくは以下の記事をご覧ください。

まとめ

・『background-image: url(“〜”);』の〜に画像のパスを書く。

それでは、最後まで読んでいただきありがとうございました。