2017-09-04 18 views
0

私はブートストラップでレスポンシブサイトを作成し、自分のサイト全体の背景イメージを使用しようとしています。私は以下のように「カバー」としての私の背景画像を使用していない「固定リピートセンター・センター」に設定すると、バックグラウンド・サイズいます:モバイルデバイスで背景がぼやけている

body{ 

      background: url(img/LandingPageIcarus.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 

     } 

だから、これはクロム、Firefoxの、IEでOKに見えますが、私はそれを開いたときどのモバイルデバイスでも、背景イメージは実際にはぼやけています。 私はさまざまな情報源から多くのオプションを試しましたが、運はありません。これが私の最初のサイトであるため、私は本当にここで苦労しています。 問題を解決できるように誰かが光を当てることができたら本当に感謝します。

これは my site

答えて

0

我々は開発者向けツールのシミュレータの携帯電話用のピクセル幅の値によって任意のウェブサイトを見てノキアN9、サムスンのためのiPhone5用320PXの範囲、360pxからある電話でどのように見えるかですS3、注3など、それは本当ですか?これらのデバイスは、より高いDpiをを持っているとあなたが考慮にそれを取る必要があるので、それは、フォントのサイズや画像のために来るとき、それは背景画像を使用して、あなたのこの

@media screen and (min-resolution: 1.5dppx) { 
.welcome-header > h1{ 
    background-image: url('../images/html5_384x384.png'); 
} 
} 

@media screen and (min-resolution: 2dppx) { 
.welcome-header > h1{ 
    background-image: url('../images/html5_512x512.png'); 
} 
} 

使用より高解像度の画像、あなたの問題のために ダメませんこれら2 DPPXの背景には、私はあなたのソリューションを試してみましたが、私は右のそれをやっていないよか、動作していないよう

ストレートクロム開発者から良いガイドhttps://developer.chrome.com/multidevice/webview/pixelperfect

+0

の範囲です。これは本当に私を怒らせている。 – AtlantisNaranja

+0

ステージングを変更して通知することはできますか? –

+0

すべてのdppxユニットで同じイメージを使用しています。それぞれのピクセル密度で3つの異なるイメージを使用する必要があります。 https://www.html5rocks.com/en/mobile/high-dpi/ヒヒの画像 –

関連する問題