PC版の Google Chorome も含め、スマートフォンの Android 系のブラウザで、背景画像の描画が思いどおりにいかないときがあります。

例えば、背景画像がコンテンツの上に重なってしまっていたり、パララックス系のデザインで背景画像の透明化や不透明化の処理に不具合が見られるとき、あるいは、コンテンツエリアが真っ白になってしまっているときなど。
多くの場合は CSS の［background-attachment］が悪さをしています。

実は、あなたが今ご覧になられているこのサイト（オンズのウェブサイト）の制作時にも、このエラーにハマり、解決に数時間を要してしまいました。

エラーが起こるのは、例えば、以下のような CSS のコードを書いたときです。

body {
background:#000 url(../images/bg.png)　center center repeat fixed;
}

上記はショートハンド・プロパティを利用して1行に収めていますが、個別に指定しても問題の解決には至らず。

body {
background-color:#000;
background-image:url(../images/bg.png);
background-position:center center;
background-repeat:repeat;
background-attachement:fixed;
}

エラーが発生するのは「background-attachement」の値が「fixed」になっているときです。

Google Chrome らしからぬ単純な不具合ですが、解決するには［background-attachement］を使わないことしかできません。

ちなみに［background-attachement］プロパティで指定できる値は以下の２つ。

  • fixed　…　背景画像の位置が固定され、スクロールしても動かなくなります。
  • scroll　…　スクロールに伴って、背景画像も移動します。

Google Crome および Android 系ブラウザの、早期の対応を望みます。