【CSS】10秒で解決　背景画像の設定方法　セットで覚えておきたいコードも紹介します

プログラミングを勉強中のみなさん、こんにちは！

今回は、背景画像の設定方法について紹介します。
初心者向けのメモ書き程度として執筆しておりますので、あしからず。

それでは見ていきましょう。

コード

このコードで、背景画像が設定できます。
background-image: url("ファイルパス");

しかし、これだけだと、画像が繰り返し表示されてしまいます。
それでいいなら問題ありませんが、一つの画像を横幅いっぱいに広げたいときは、

background-size: cover;
を設定しましょう。

そして最後に画像の位置を中央にもってくる設定として
background-position: center;
を記載しましょう。

注意点

背景画像を設定しても、設定する要素に「高さ」がないと、表示されません。

ですので、「あれ、設定したはずなのに・・・」と困ったら、
その要素に、

height：500px;

など適当に設定してみください。
表示されるはずです。

詳細はこちらを参照してみてくださいね。
背景画像の設定

まとめ

画像を横幅いっぱいに設定する。
これがWebサイトで多く見られるのではないでしょうか。

background-image: url("ファイルパス");
background-size: cover;
background-position: center;

このコードを３点セットで使用することを覚えておけば便利です。
（コード自体を覚える必要はありません。使うときに調べればいいので。）

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

背景画像に関連する記事も紹介しておきます。