HTML/CSSで背景画像をフルスクリーンに設定する（スマホでの表示方法も！）

こんにちは！

今回は、

HTML・CSSで背景画像をフルスクリーンにする グラデーションをかける

やり方を記録に残したいと思います。

デモはこちら↓（スマホの方はresultを押してみてね）

See the Pen 背景画像のフルスクリーン by dyna (@sakudyna) on CodePen.

※ちなみに、IOSでは一部うまく動かないところがあるので、デモはIOSでも動くように設定しています。

この内容も、最後に紹介します。

では行ってみましょう（＾＾）！

1. 画像を指定する
2. 背景グラデーションのつけ方
3. IOSでの場合

画像を指定する

まずは、背景画像を設定します。

サンプルはbodyに設定しましたが、headerだったり、ファーストビュー部分だったり、

背景画像設定したい部分に画像パスを設定します。


#index{ 
  background-image: url(../images/○○.jpg);
}

#index{

background-image: url(../images/○○.jpg);

}

こちらのサイトが分かりやすいよ！

参考：

https://developer.mozilla.org/ja/docs/Web/CSS/background-image

画像を設定したら、必要に応じて、以下を設定します。

・画像の表示開始位置の指定
・画像の固定
・背景画像の大きさの指定
・繰り返しをしない指定

画像の表示開始位置の指定

背景画像の表示開始位置を設定するときは、

background-position：左右　上下　を指定します。

デフォルトでは、左上を基準として表示されていますが、background-positionプロパティで表示開始位置を指定できます。


 #index{
  background-position:center center;
 }

#index{

background-position:center center;

}

参考：

https://developer.mozilla.org/ja/docs/Web/CSS/background-position

画像の固定

背景画像をコンテンツの高さにかかわらず表示できるのが、

background-attachment

プロパティになります。


#index{
  background-attachment: fixed;
}

#index{

background-attachment: fixed;

}

今回は背景を固定してスクロールさせたくないので、fixdを設定しました。

デモをスクロールしてみてね！
背景は固定してあるよ！

参考：

http://www.htmq.com/style/background-attachment.shtml

背景画像の大きさの指定

background-sizeプロパティを使って、画像の大きさを設定します。

今回は縦横比を維持して、指定領域を覆う　cover　を設定しています。


#index{
  background-size: cover;
}

#index{

background-size: cover;

}

参考：

https://developer.mozilla.org/ja/docs/Web/CSS/background-size

繰り返しをしない指定

背景画像を繰り返したくない場合は、

background-repeat : no-repeat; を指定します。

サイトのサンプルが分かりやすいよ！

参考：

https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat


#index{
  background-repeat: no-repeat;
}

#index{

background-repeat: no-repeat;

}

背景グラデーションのつけ方

背景にグラデーションをつけたいときは、linear-gradientを使います。

linear-gradient：（角度 , はじまりの色 , 終わりの色）;


#index{
  background-image:
   linear-gradient(0deg,  rgba(18, 204, 179, 0.411), rgba(20, 90, 78, 0.342)),
   url('指定のパス.jpg');
}

#index{

background-image:

linear-gradient(0deg, rgba(18, 204, 179, 0.411), rgba(20, 90, 78, 0.342)),

url('指定のパス.jpg');

}

参考：

https://developer.mozilla.org/ja/docs/orphaned/Web/CSS/linear-gradient()

IOSでの場合

background-attachment: fixed;とbackground-size: cover;を

同時に指定していると、IOS（iPhone）などでは

上手く動作しません。

参考：

https://caniuse.com/?search=background-attachment

解決策として、固定したい部分の前に疑似要素を作り、そこに背景を設定して、

疑似要素自体を固定してしまいます。

コードとしてはこんな感じです。


body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-image: linear-gradient(0deg,  rgba(18, 204, 179, 0.411), rgba(20, 90, 78, 0.342)),
      url(画像パス);
  background-size:cover;
  background-position:center center;
}