[加藤]

【お使いの Snow Monkey のバージョン】

バージョン: 20.5.1
【お使いの Snow Monkey Blocks のバージョン】

バージョン 19.10.1
【お使いの Snow Monkey Editor のバージョン】

バージョン 9.2.5
【お使いのブラウザ】

safari・GoogleChrome
【当該サイトのURL】

### 実現したいこと

スマホでもカバー画像の背景固定をしたい

### 発生している問題

カバー画像の設定で固定背景にし、PCでは固定背景になりましたが、スマホ実機で確認したところ背景画像が固定ではなく通常になっている

### 試したこと

ブラウザの問題かと思い、safariとGoogleChromeで試しましたが、同じ結果となりました。

お手数おかけしますがよろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

確か iPhone の仕様だったような…。

【コピペ可】background-attachment: fixed;がiOSのSafariで効かない問題を完全に解決する【CSSのみ】

こんにちは。今回はパララックス表現を行うためのプロパティ、background-attachment: fixedがiOSのSafariで動かない問題を回避するための方法を書いていきます。結論（コ…

itokoba.com

♥ 0

いいねをした人: 居ません

[加藤]

ご回答ありがとうございます。

iPhone の仕様なんですね。
背景固定の機能は使えないということでしょうか？

背景固定の設定を無しにして、以下のコードを追加CSSに書いたのですが、画像ごと表示が消えてしまいました。

解決策が見えておりません。

お手数おかけしますがよろしくお願いいたします。

.Section-Image {
position: fixed; /* fixedに変更する。それ以外は同じ。 */
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}

♥ 0

いいねをした人: 居ません

[GONSY]

メンテナンス性が悪いうえに、強引な方法なので不具合出るかもしれませんが、以下で実装可能かと思います。

@media screen and ( max-width: 768px ) {

	/* 【カバー】ブロックの「高度な設定」で指定したクラス名 */
	.fixed_bg {
		overflow: hidden;
	}

	/* Snow Monkey Blocksで指定した画像は使用しない */
	.fixed_bg .has-parallax {
		display: none;
	}

	/* 都合が悪いのでブロック設定で設定したオーバーレイの数値を戻す */
	.fixed_bg .wp-block-cover__background {
		opacity: 1 !important;
	}

	/* 新たにスマホ用にオーバーレイを指定 */
	.fixed_bg .wp-block-cover__background::before {
		background-color: #CD162C; /*任意*/
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:0;
		opacity: .7; /*オーバーレイの不透明度*/
		width:100%;
		height:100%;
	}

	/* 新たに背景画像を指定 */
	.fixed_bg .wp-block-cover__background::after {
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		background-repeat: no-repeat;

		/* 位置は任意で調整 */
		background-position: 20% center;

		/* 画像はPC用と同じものを使用 */
		background-image:url('https://demo.gonsy.net/wp-content/uploads/2022/12/david-maunsell-nVRxhLH74iw-unsplash.jpg');

		/* 適宜調整 */
		background-size: 1200px;
	}

}

 
実装したページ

背景固定 – Demo Site for Snow Monkey

demo.gonsy.net

1つのCSSですべてのカバーブロックに適用させることはできませんが、参考になれば幸いです。

♥ 3

いいねをした人:

[加藤]

GONSYさん、ありがとうございます。

メンテナンス性が悪く、不具合が出る可能性があるとのことで、相談して進めます。

ありがとうございました！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿