【SWELL】固定ページごとに背景画像をPCとスマホの両方で固定表示させる

2025年2月8日2025年2月19日

当サイトでも使用しているWordPressテーマ「SWELL」の背景画像をスクロールしても固定させる、PCとスマホの両対応の設定方法です。

CSSを “CSS用コード” に追加

固定ページ＞カスタムCSS &JS＞CSS用コードに下記の内容を追加。

2行目の “rgba(0,0,0,0.5)” は画像の上に半透明の黒を被せていますが、数値は適宜調整して下さい。

#body_wrap::before {
background-image:linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(画像URL);
background-position:center center; /* 画像位置 */
background-size: cover;
background-repeat: no-repeat;
content: "";
display: block;
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
width: 100%;
height: 100vh;
}

Note

　固定ページごとの設定なので共通CSSのstyle.cssには追加しないで下さい。