Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] 背景画像がスクロールされてしまう

ブログ相談

最新の投稿 : わいひら 6年前

6 投稿

2 ユーザー

1 Reactions

3,261 表示

未解決

RSS

みょこ

(@みょこ)

Active Member

結合: 6年前

投稿: 14

Topic starter 2019年3月21日 12:49

いつもお世話になっています。
頼まれて制作したWebサイトにて「m-sora」スキンを使用しておりますが、iOSで表示すると背景画像がスクロールされてしまいます。
そのため、記事が増えると背景画像が記事全体の長さに拡大されてしまい、背景がザラザラしたノイズとして表示されてしまいます。
配布元のサイトもiPhone6sのchromeとsafariにて同様に表示されております。
参考までに、制作したサイトはこちらです。

調べた結果、IEとiOSのバグで
background-attachment: fixed;
と
background-size: cover
を同時に使用した場合にbackground-attachment: fixed;が無効になるようです。
※参考　 https://y-com.info/contents/?p=5941

参考元に記述されている「body:before」を使用する方法でバグ対策をしましたが、これだと背景画像を差し替えるにはcssを触るしかありません。
バグである以上、バグフィックスを待つしかないのですが…
これで対応するとcocoonやwordpressの編集画面から背景画像を簡単に差し替えることができないので、どうにかならないかなあとダメ元で投稿してみました。
（自分の検索の仕方ではこちらのフォーラムにてこういった事例の対策を見つけることができなかったこともあります）
（単に検索の仕方が悪かったのでしたら申し訳ありません）

みょこ

(@みょこ)

Active Member

結合: 6年前

投稿: 14

Topic starter 2019年3月21日 12:57

すみません、制作したサイトの方はすでに疑似要素を用いて背景画像が固定表示されるようにしています。
こちらがドメインを取得する前に仮で設置した物で、バグ対策をする前の、cocoonもスキンも導入したばかりの状態です。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17211

2019年3月21日 22:21

対策としては、以下のコードをm-soraのstyle.cssに追記するということでいいのでしょうか？

body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("https://im-cocoon.net/wp-content/uploads/bg.jpg") center no-repeat;
	background-size: auto;
	background-size: cover;
}

僕は、iPhoneを持っていないので、ご確認いただければ幸いです。
もしそれで、問題が解決するようであれば、m-soraにコードを追加します。