スマートフォンで背景画像のリピートが反映しない現象


通常、スマートフォン用のウェブページを構築しなければパソコンで見るのと同じものがスマートフォンで表示されます。
ただ、複数のスマートフォン、つまり複数のキャリア・OS・ブラウザで閲覧した場合に、モノによっては別の見栄えで表示されてしまうこともあります。
先日制作したウェブサイトで起こった現象です。
フッター部分の背景に画像を設定していて、cssでX軸方向にリピートをかけていたのですが特定のブラウザで背景画像のcssが読み込まれず、
リピートされていない画像が1枚、背景の左端に表示される結果に。
画像の右端が切れて見えていて、何とも不格好でした。
不具合が見られた機種は複数あり、軒並み最近発売されたものに偏っていました。
背景に設定していた画像を横に2回リピートさせると一般的なブラウザ幅以上になったため、2回分リピートさせた画像を作り背景に設定し直しました。
元々容量の小さな画像であったことも不幸中の幸いです。
どんどんスマートフォンの普及も進み新しい機種も発売されていってますので、社内及びクライアント双方のチェックで問題がない場合も
背景にリピート設定で画像を表示させる場合、余裕があれば、念のため幅を大きくしたものを設定しておいた方が無難かもしれません。
Posted by Fujita

Related Posts

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoは色々カスタマイズもできてホームページに動画を埋め込みたい時は便利なサービスです。 ただ、最近ではレスポンシブデザインのサイトが多くなっているので固定サイズのまま埋め込むとおかしなことになってしまいます。 Vimeoの埋め込みコード発行はレスポンシブにも対応しているのですが、オプションのカスタマイズ設定をしないと対応できないので注意が必要です。 オプションのカスタマイズ設定が見当たらない場合...

重要 総額表示義務化に伴うホームページ修正キャンペーン

2021年4月より総額表示が義務化されます。 今まで経過措置として10000円(税別)の記載でホームページ上OKだったものも11000円(税込)等に修正する必要があります。 主な対象としてはBtoC(不特定への一般消費者向け価格表示)であり、 具体的には接骨院、歯医者、眼科、皮膚科等のクリニックやサービス業、ECサービス等幅広く対象とされています。 まだご自身のホームページを修正されていない場合はお早めにご対応下さい。 なお、弊社では初めてのクライアント様は特別料金(無料~)で対応させて頂いています。...

コロナ渦の求人。Google広告でエリア限定して効果的に

2020年は新型コロナウイルス感染症により従来のやり方が通用しない年となってしまいました。 求人市場は求職者にとっても企業にとっても大変な状況です。 従来のやり方が通じないのなら新しい取り組みにチャレンジしないといけません。 採用において人材紹介会社やハローワーク等しか利用しておらず自社で積極的な求人アピールを今までしていない企業さんはこれを機会にGoogle広告を活用してみましょう。 Google広告(Googleアドワーズ)とは...