kv画像を可変に対応する方法

こんにちは。

今日はkv画像を画面幅に関わらず崩れないようにする方法について書きます！

というのも、以前そのようなコーディングをした時に結局方法が分からなかったんですよね^^;

backgroundプロパティには色々設定する値があって、どれか1つでも違うとうまくいきません(＞＜)

なので今日でしっかり理解して書きながら自分の中に落とし込もうと思います！

ちなみにイメージはこんな感じです。

ではみていきましょー！

コーディング

kv画像は横1920px、縦680pxの可愛い猫ちゃんの画像を使っています。

「ぱくたそ」という無料素材提供サイトからもってきました＾＾

HTML編

      <div class="kvSect">
        <h1 class="sectTit">タイトル</h1>
      </div>

CSS編

.kvSect {
  position: relative;
  background: url(../images/kv_img01.jpg) no-repeat center center/cover;
}

.kvSect .sectTit {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.3);
  text-align: center;
  transform: translate(-50%, -50%);
  line-height: 1.4;
}

@media only screen and (min-width: 769px) {
  .kvSect {
    height: 680px;
  }
  .kvSect .sectTit {
    width: 300px;
    font-size: 60px;
  }
}

タイトルのCSSは適当なのでスルーしてもらっても大丈夫です！

ポイントは2点あります。

まず1つめはセクションの高さ（height）は画像の高さに指定する。（カンプからスライスするときの高さ）

2つめはbackgroundプロパティの値に気をつけることです。

background-positionはcenter center

background-sizeはcoverです。

これで画面幅を変えても変に崩れたりしないはず・・・！

考えていたら時間がなくなってしまったので今日はここまで〜〜