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

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

こんにちは!

今回は、

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

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


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

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

 

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

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

 

では行ってみましょう(^^)!



画像を指定する

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

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

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



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

  

参考:

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

 

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

 

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

  

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

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


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

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

 

参考:

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


画像の固定

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

 background-attachment 

プロパティになります。

  

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

 

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

 

参考:

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


背景画像の大きさの指定

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

 


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

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


linear-gradient:(角度 , はじまりの色 , 終わりの色);

参考:

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

 

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

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

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

 

 


こんな感じで、デモができました!

作るの楽しいですね(^^)!

 

ここまで読んで下さりありがとうございます。

 

参考にした本は↓

HTML&CSSとWebデザインが 1冊できちんと身につく本

 

 

<あわせて読みたい>