背景画像固定がスマホ実機で反映されない

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

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

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

itokoba.com

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

@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;
	}

}

 
実装したページ

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

♥ 3

いいねをした人: