読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

background-attachment:fixed;とbackground-size:cover;はモバイル時に衝突する。

HTML&CSS WebDev RWD

 画像を大きく見せるデザインで、あるdiv領域にbackground-imageを適用するということはよくある。その際、CSSは次のようになる。これは、imageを固定させて、パララックスのように見せかける、「擬似パララックス」とでも呼ばれうるスタイルだ。昨日の記事を書いている時に見つけたサイトでも使われている(Frog - バンクーバーを拠点とするクリエイター留学サポート企業)。

.header-image-area {
    background-image: url("../img/example.jpg");
    background-color: #0f0f0f;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding:5.3em 2.1em; 
    position: relative;
}

 これでデスクトップ時には普通に表示されるものの、RWDの観点からこれは問題となる。iPhoneなどで実際に見てみると、画像が大きく拡大されて、いったいなんの写真なのかわからないという事態になる(デスクトップのブラウザを縮めた時にはこうはならないので厄介)。
 どうやら、モバイルファーストの考えに則ってやる必要がある。モバイルファーストだったらどのようなCSSになるか、上のスタイルからデザイニング・イン・ブラウザで引き算しながら調整する。すると、以下のようにすれば解決するとわかる。

.header-image-area {
    background-image: url("../img/example.jpg");
    background-color: #0f0f0f;
    background-position: center center;
    background-size: cover;
    padding:2.3em 1.1em; 
    position: relative;
}
@media screen and (min-width: 768px) {
  .header-image-area {    
    background-attachment: fixed;
    padding:5.3em 2.1em; 
  }
}

 これによって、background-attachment: fixed;が768px以上でのみ適用されるようになって、モバイル時にも大きなbackground画像がちゃんと表示されるようになる。max-widthを使って、後からfixedをscrollで上書きするというのもありかもしれないけれど、モバイルファーストのやり方のほうが好ましい (とはいえ、サイト全体を構築していくときにモバイルファーストを実践するのは結構難しいので悩ましいところ)。