投稿ページ、スマートフォンでのカテゴリー毎の背景画像の固定でiphone（safari）は「background-attachment: 」が使えない場合の対処

PR 2017/12/9

このトピックには4件の返信、2人の参加者があり、最後にのりたまにより8年、 11ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2017年12月7日 9:51 PM #57505
  のりたま
  ゲスト
  お世話になっております。
  初歩的な質問で申し訳ないですけれど宜しくお願いします。
  
  現在、ほぼ8割スマホからの閲覧のHP（完全レスポンシブル）を運営しております。
  今、困っている事はスマホ（iphone（andoroidでは未確認））で閲覧した時に投稿ページの背景画像の固定の方法が分かりません＾＾；
  現状、固定ページは「page-id-xxx」を使ってHTMLに空の「div class=”background-xxx”」を書き込んでCSSに次の様に書き込んで背景画像の切り替えと固定を固定ページ毎にしております。
```
.background-xxx {
        z-index: -1;
        background: url(/zzz.jpg) #000 no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
```
  CSSにてスマホ用「@media screen and (max-width: 751px)」で固定ページの背景画像の切り替えと固定は出来ていますが、投稿ページ（特定のaaaカテゴリーとaaaカテゴリーの一覧に属している時）での背景画像の固定方法が分かりません。
  投稿ページ「page-id-xxx」が「aaaカテゴリーとaaaカテゴリー一覧」に属している時の背景画像の固定の方法を教えて頂けますか？
  投稿する度に「page-id-xxx」を使って「空のdiv」とCSSを書き込んだら良いのですが手間が掛かります、カテゴリーで毎に背景画像を固定する方法は無いでしょうか？
  現状、固定ページの背景画像は固定されて表示されております。
  拙い説明で申し訳ないですけれども宜しくお願いします。
  説明が足りなかったらご指摘願います＾＾；
- 2017年12月8日 7:21 AM #57510
  かうたっく
  ゲスト
  投稿ページ（特定のaaaカテゴリーとaaaカテゴリーの一覧に属している時）での背景画像の固定方法
  
  ・aaaカテゴリー指定の場合
  
  bodyタグ内のクラス.categoryid-68、#main内にある#post-15343を指定すれば良い気がします。
```
メディアクエリ {
.categoryid-68 #post-15343 {
}
}
```
  1度試してもらえますか。
- 2017年12月8日 6:28 PM #57517
  のりたま
  ゲスト
  かうたっくさま　返信ありがとうございます。
  仰る通りにCSSに「.categoryid-xx #post-xxxxxx」を指定してやってみたらページそのものが固定されてしまいました＾＾；
  
  ごめんなさい、分かりにくい説明でした＾＾；
  PCでの表示では「background-attachment: fixed;」を使って思った通りに背景画像を固定出来てます。
  
  しかし、iphone（safari）は「background-attachment: 」が使えないようでその代わりに他の方々はページに空の「div」を書き込んでCSSでその空の「div」に画像を指定して「position: fixed;」を使って固定しているようです。
  個別の記事では昨日、投稿した通り空のdivと「position: fixed;」を使って切り替えと固定表示は出来ております。
  上記の方法ならば背景画像の切り替えと固定は出来ますが毎回手間が掛かってしまいますし、webに疎い人も記事を投稿しますので・・・。
  
  現状、表示させたいページの背景画像はCSSに
  （＊　このページの背景画像はカテゴリー毎に切り替えてます。）
```
body.categoryid-2 {
    background: url(/xxx.jpg) repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    text-rendering: optimizeLegibility;
}
```
  と
  
  （＊　このページはカテゴリーの一覧のページです。）
```
body.category-information {
    background: url(/yyy.jpg) repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    text-rendering: optimizeLegibility;
}
```
  を使用してPCでは背景画像を切り替えて固定表示出来ております。
  
  しかし、iphoneでは上記の方法が使用できない（コンテンツと一緒に背景画像がスクロールしてしまいます。）ので何か良い方法は無いかと相談した次第です。
  
  この説明で解りますでしょうか？＾＾；
  お手数おかけしますが宜しくお願いします。
- 2017年12月8日 7:59 PM #57521
  
  わいひら
  キーマスター
  
  僕は、iPhoneを持っていないので実際に試すことはできないのですが、「background-attachment: fixed iOS」で検索して出てくる::before擬似要素を使った方法とかではダメでしょうか？
- 2017年12月8日 9:06 PM #57522
  のりたま
  ゲスト
  わいひら様　返信ありがとうございます。
  
  「before::」を使用して思い通りにスマホでの背景画像の切り替え固定が出来ました！
  本当にありがとうございます！
  「before::」を検索結果で目にはしていたのですが「空のdiv」を使う「before::」の方法しか気が付かなかったです＾＾；
  
  こちらを参考にして上記のCSSを
```
    /*お知らせページ*/
    body.categoryid-2{
        background:none;  /* 一旦、PC用の背景画像を消す。 */
    }
    body.categoryid-1::before {
        background:url("/xxx.jpg") repeat center center;
        background-size: cover;
        display: block;
        position: fixed;  /* ★スマホ用にコレで代替。 */
        top: 0;
        left: 0;
        width: 100vw;  /* ★サイズ指定。 */
        height: 100vh;  /* ★サイズ指定。 */
        content: "\A";  /* ★大事 */
        z-index: -1;  /* ★大事 */
    }
    /*お知らせ一覧ページ*/
    body.category-information{
        background:none;  /* 一旦、PC用の背景画像を消す。 */
    }
    body.category-information::before {
        background:url("/yyy.jpg") repeat center center;
        background-size: cover;
        display: block;
        position: fixed;  /* ★スマホ用にコレで代替。 */
        top: 0;
        left: 0;
        width: 100vw;  /* ★サイズ指定。 */
        height: 100vh;  /* ★サイズ指定。 */
        content: "\A";  /* ★大事 */
        z-index: -1;  /* ★大事 */
    }
```
  に書き換えたら思い通りに切り替え、固定表示をしてくれました。
  
  お手数ですが同じ事で悩む方の為にこの分かりにくいフォーラムのタイトル「投稿ページ、スマートフォンでのカテゴリー毎の背景画像の固定。」を分かりやすタイトルに変えて頂いても結構です＾＾；
  
  かうたっく様、わいひら様
  大変ありがとうございました。
  今後ともよろしくお願いします。
投稿者

投稿