(ちょっとメモ)スマホで background-attachment: fixedが効かない場合の対処法

最終更新日:2017年11月14日  (初回投稿日:2016年03月09日)

時系列だとちょっと記事の順番が戻っちゃいますが、background-attachmentプロパティに関するメモです。

Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおり表示するのに、iOS Safari ではウマくいかなくて困りまして...

その解決方法を調べて、こちら↓に詳しくメモっておきましたので見てみてください。
background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き*

とりあえずここにもCSSのソースコードを貼っておきます

「*Web Design 覚え書き*」と記事内容が重複しますが、わざわざあっちでソースコードを見るのが面倒な方のために、こちらにもCSSを貼っておきますね♪

下のHTMLは、コンテンツ全体を div#wrap で囲んだ例です。

<body>
  <div id="wrap">
  <!--コンテンツ全体を #wrap で囲んだ例です-->
  </div>
</body>

この div#wrap に背景画像を下記のように指定すれば、PCブラウザならウィンドウサイズにピッタリ合わせて背景を表示します。(body要素に背景画像を仕込んでもイイ。その場合セレクタは body です)

#wrap {background:url(image/bg.jpg) center/cover no-repeat fixed}

iOS Safari では上の↑指定ではダメなので、backgroundでの fixed をヤメて、擬似要素 ::before で新しくブロックレベル要素を作り、それを position: fixed にし、背景画像を指定します。
このCSSは「メディアクエリ」を使ってスマホ用に切り替えます。

@media screen and (max-width:640px) { /*ブレイクポイントはご自分のサイトに合わせて*/
  #wrap {
    background:none /*PC用の背景はオフ*/
  }
  body::before {
    content:"";     /*コンテンツなし。""の中に何も書きません*/
    display:block;  /*::beforeで書きだす擬似要素をブロックレベルにするのを忘れずに*/
    position:fixed; /*この場合body要素の親であるhtml要素へのpositionです*/
    top:0;
    left:0;
    z-index:-1;
    width:100%;   /*html要素に対して幅100%に*/
    height:100vh; /*html要素に対して高さ100vhに*/
    background:url(image/bg.jpg) center/cover no-repeat /*fixedをトル!これやんなきゃ意味無い*/
  }
}

backgroundプロパティのショートハンド
【15-5】backgroundのショートハンド まとめ

擬似要素 ::before については
【3】id とか classって何?(セレクタの「種類」を知っておこう)

height:100vh の「vh」という単位
【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
をご覧ください。

CSSのメディアクエリについては
Media Queriesの条件分岐とブレイクポイントについて | *Web Design 覚え書き* でメモっています。

display:block(displayプロパティ)については、次回から詳しく解説します。
contentプロパティ、positionプロパティ、z-indexプロパティについても 近いうちにやります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.