【HTML＆CSS】画像の背景設定とサイズ変更の仕方

#対象者

①画像の背景設定をしたい方
②画像のサイズ変更をしたい方

#手順目次
1.background-imageプロパティで背景画像指定

2.background-sizeで画像の大きさを変更

3.background-positionで背景画像の位置を調整

#実際の手順と実例
###1.background-imageプロパティで背景画像指定

必ず画像専用フォルダを準備して、そのフォルダ内に画像をダウンロードしておく!!

実際に使うプロパティは以下の通り

セレクタ {
  background-image: url(画像のパス);
}

実例を上げると

index.html
    <div class = "main-visual">
      <img src="mv.png" alt="#">
    </div>

style.css
.main-visual {
  width: 100%; 
  height: 650px;
  ここに追加！
  background-image: url(img/mv.png)
  }

###2.background-sizeで画像の大きさを変更
値、画像幅、画像の高さをそれぞれ指定する

セレクタ {
  background-size: 値;
  background-size: 画像の幅 画像の高さ;
}
````````


実際には

.main-visual {
width: 100%;
height: 650px;
background-image: url(img/mv.png);
background-size: cover;
}

値だけでもOK！全体を覆うサイズで伸縮させる

```````
【おまけ：その他の使用例まとめ】

セレクタ {
  /* 元画像のサイズを維持したまま、自動的に表示される 初期値 */
  background-size: auto;

  /* 画像の縦横比を維持したまま、領域全体を埋め尽くすまで伸縮される（画像全体が表示される） */
  background-size: contain;

  /* 画像の縦横比を維持したまま、領域全体をおおうサイズで伸縮される（画像の表示されない部分も発生） */
  background-size: cover;

  /* 表示領域の幅100％ 高さ100％で表示（縦横比は無視） */
  background-size: 100% 100%;

  /* pxを指定して表示 */
  background-size: 24px auto;
}
``````````


###3.background-positionで背景画像の位置を調整

```````
セレクタ {
  background-position: 値;
  background-position: 値 値;
}
```````````

値には

* top
* right
* bottom
* left
* center

この他にもpxや％指定も可能です！

実際に例を用いてコードを記述すると、

``````
.main-visual {
  width: 100%; /* 横幅いっぱい */
  height: 650px;
  background-image: url(img/mv.png);
  background-size: cover;
  background-position: center;
}
```````


上記の３つで自在に背景画像を動かすことができます！