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

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

CSSで背景画像の設定するにはどうすればいい？

という疑問にお答えします。

background-image: url("ファイルパス");

というコードで設定できちゃうのでとても簡単です。

初心者向けのメモ書き程度として執筆しておりますので、あしからず。

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

コード

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

しかし、これだけだと、画像が繰り返し表示されてしまいます。

ファイルパスを間違えると表示さレナイノで気をつけてくださいね。

一つの画像を横幅いっぱいに広げたいときは、

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

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

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

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

height：500px;

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

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

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

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

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