HTMLで背景色や背景画像を設定する方法【現役エンジニアが解説】

PROGRAM

今回は、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の背景画像を設定して、画面のサイズに合わせて画像を表示しています。