HTMLで背景色や背景画像を設定する方法【現役エンジニアが解説】
今回は、HTMLで背景色や背景画像を設定する方法について、それぞれに分け、簡単に解説していきます。
背景色の設定
背景色を設定するには、スタイルのbackground-colorプロパティを使います。
スタイルのbackground-colorプロパティの値には、HTMLのカラーコードを指定します。
body{
background-color:#FF0000;
}
上記のコードでは、body要素に赤色(#FF0000)の背景色を設定して、画面全体の背景を赤くしています。
背景画像の設定
背景画像を設定する場合は、スタイルのbackground-imageプロパティを使用します。
スタイルのbackground-imageプロパティの値には、画像のURLをurl(“URL”)の形式で指定します。
body{
background-image:url("hoge.jpg");
}
上記のコードでは、body要素にhoge.jpgの背景画像を設定して、画面全体に画像を繰り返し表示しています。
背景画像を画面に合わせて表示
スタイルのbackground-imageプロパティのみでは、背景画像は繰り返し表示されてしまいます。
画面に画像サイズを合わせて表示したい場合は、スタイルのbackground-sizeプロパティをcoverにします。
body{
background-image:url("hoge.jpg");
background-size:cover;
}
上記のコードでは、body要素にhoge.jpgの背景画像を設定して、画面のサイズに合わせて画像を表示しています。