【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;

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

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

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