背景画像のCSSプロパティを5つ紹介します

具体例と共に見ていきましょう。
(去年まで札幌市に住んでいたため、大通公園の写真を使いました。)

background-image: url("");

例えば、こんな画面の背景に

HTML

<section class="background">
  <div class="text">
     <p>sapporo</p>
   </div>
</section>

SCSS

 .background {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  .text {
    background-color: rgba(255,255,255,.8);
    padding: 10px 25px;
    font-size: 200%;
    border-radius: 5px;
  }
}

この画像を指定したい場合

sapporo.jpg(2304 × 1536)

このような指定をすると

.backgournd {
  background-image: url("sapporo.jpg");
}

こうなります。

背景画像を設定することが出来ました。

画像の左上1/4が拡大表示されているという状態です。

background-size: cover;

これを追加すると

.background {
 background-size: cover;
}

元の画像サイズが維持できました。

しかし、スマホの画面幅には合っていないようです。

background-position: 〇〇%;

これを追加すると

background-position: 50%;

画像の中心が表示されました。

background-size: auto;

これを追加すると

  background-size: auto;

サイズを自動算出してくれます。

Mac Book (横幅1,440px)

iPhone7 (横幅375px)

background-attachment: fixed;

これを追加すると、背景画像が固定されて前面のテキストだけが動くようになります。
パララックス効果と呼ばれているようです。

background-attachment: fixed;

しかし、iPhone7のOSであるiosでは、使えないらしいので
スマホの時は、以下の方法を採用します。

.background {
   @include mobile {
     background: none;
       &::before {
       content: "";
       display: block;
       position: fixed;
       top: 0;
       left: 0;
       -webkit-transform: translate3d(0, 0, -1px);
       transform: translate3d(0, 0, -1px);
       width: 100%;
       height: 100vh;
       background: url("sapporo.jpg") center/cover;
       -webkit-background-size: cover;
      }
   }
}

前面のテキストには、

z-index: 1;

を指定しています。

これで、スマホの時もパララックス効果が実現できました。

動作確認
http://xs437226.xsrv.jp/sample/background-img__fix/

@include mobile {
}

ここでは、mobileという関数を呼び出しています。
定義部分は、こちらです。

@mixin mobile {
  @media (max-width: 644px) {
    @content;
  }
}

SASSの関数でブレイクポイントを設定する方法については、この記事で書いています。
khirok.hatenadiary.jp