背景画像がスクロールされてしまう - ブログ相談

RE: 背景画像がスクロールされてしまう

わいひら — Tue, 26 Mar 2019 11:18:53 +0000

動作確認ありがとうございます！

問題なかったようでよかったです ?

RE: 背景画像がスクロールされてしまう

みょこ — Tue, 26 Mar 2019 08:31:25 +0000

早速対応頂いたのにお返事が遅くなり申し訳ありませんでした。
修正版で問題なくiPhoneでも背景が画面のサイズで固定されるようになりました。
ありがとうございました！

RE: 背景画像がスクロールされてしまう

わいひら — Thu, 21 Mar 2019 13:23:09 +0000

一応修正版もアップしておきました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
https://wp-cocoon.com/wp-content/uploads/2019/01/github-zip.png

RE: 背景画像がスクロールされてしまう

わいひら — Thu, 21 Mar 2019 13:21:08 +0000

対策としては、以下のコードを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にコードを追加します。

RE: 背景画像がスクロールされてしまう

みょこ — Thu, 21 Mar 2019 03:57:13 +0000

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

背景画像がスクロールされてしまう

みょこ — Thu, 21 Mar 2019 03:49:32 +0000

いつもお世話になっています。
頼まれて制作した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の編集画面から背景画像を簡単に差し替えることができないので、どうにかならないかなあとダメ元で投稿してみました。
（自分の検索の仕方ではこちらのフォーラムにてこういった事例の対策を見つけることができなかったこともあります）
（単に検索の仕方が悪かったのでしたら申し訳ありません）