CSSで画面いっぱいに画像を表示させる方法

WordPressサイトでフルスクリーンで画像を表示させる方法です。

調べてみるといろいろな方法がありましたが、私がやりたかったのはトップページのみのフルスクリーン。

ダッシュボードの中にある「追加CSS」に記載してしまうと、全ページに反映されてしまうため、表示させたいページにCSSを記載する方法をとりました。

画像をフルスクリーンに表示するCSS

⇩⇩⇩ここから⇩⇩⇩

<style type=”text/css”>
body {
background-image: url(※画像URL);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #ffffff;
}</style>

⇧⇧⇧ここまで⇧⇧⇧

これをページ内に記載するだけで、そのページだけフルスクリーンで画像を表示させることが可能です。
ウェブカラーズのページで言うと、TOPページがこの方法を使っています。

追記:この方法だとiPhoneでは乱れが出ることがわかり、タグを修正しました。
詳しくはこちら→「CSSで画面いっぱいに画像を表示させる方法 iPhone編

[ CSSで画面いっぱいに画像を表示させる方法 ]デザイン忘備録,フリーランス日記2021/05/02 21:40