[初心者向け] 背景画像を画面サイズに合わせたい。時

はじめに

メモ程度の記事です。
背景画像が繰り返されたり、なんかいい感じになってくれない時
ググるとすごく詳しく書いてあるサイトはあるけど、
「とりあえずやり方だけ教えてよ」っていう方の役に立てればと思います。笑

背景画像をいい感じにフィットさせるやり方

とりあえずこの
[background-position: center;]と[background-size: cover;]
をcssに入れるといい感じになると思います

.css

.body{
  /* 画像を背景画像に */
  background-image: url("../img/image.jpg");

  /* 背景を真ん中にしてくれる */
  background-position: center;
  /*背景画像のサイズを自動調整 */
  background-size: cover;
}

少しだけ解説

1、背景にしたい画像はhtmlとかcssが入っているファイルの中に入れておいてください

2、CSSで背景画像を入れたいところに、
[ background-image: url("../img/image.jpg"); ]を書く。
url() の()の中何を書けばいいか分からないよって方は
url("⚪︎")　　←この⚪︎が書いてあるところで、 ./　 か　../
と打ってみてください。 それで画像の名前が出てきたら、画像の名前を押せばokです!
出てこなかったらちょっと他のサイトで調べてみてください。笑

3、あとは続けて　
background-position: center; と
background-size: cover;　をCSSに書いて終わりです!

background-position: center;

背景画像を上下左右中央に配置してくれる

background-size: cover;

画像を「背景になる範囲」が全て隠れるサイズにしてくれる（縦横比保持）
らしいです。　
僕はただいい感じなるんだと思って使ってます笑