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>
⇧⇧⇧ここまで⇧⇧⇧
これをページ内に記載するだけで、そのページだけフルスクリーンで画像を表示させることが可能です。
追記：この方法だとiPhoneでは乱れが出ることがわかり、タグを修正しました。
詳しくはこちら→「CSSで画面いっぱいに画像を表示させる方法 iPhone編」
