ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法

（ちょっとメモ）スマホで 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プロパティについても近いうちにやります。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。