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>

⇧⇧⇧ここまで⇧⇧⇧

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

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