모바일 장치에서 배경 이미지가 흐릿함

부트 스트랩에 반응 형 사이트를 만들고 내 사이트의 전체 본문에 배경 이미지를 사용하려고합니다. 내가 그것을 열 때 지금이 크롬, 파이어 폭스, IE에서 확인을 보이지만모바일 장치에서 배경 이미지가 흐릿함

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; 

     }

: 나는 다음과 같이 내 배경 이미지를 사용하여 "커버"로 아니오 "를 반복 센터 센터 고정"와 배경 크기로 설정하고 어떤 모바일 장치에서든 배경 이미지가 정말 흐릿합니다. 다른 소스에서 많은 옵션을 시도했지만 운이 없으며 이것이 내 첫 사이트이므로 여기에서 정말 고심하고 있습니다. 누군가가 약간의 빛을 비출 수있어서 문제를 해결할 수 있다면 정말 고맙겠습니다.

이것은 my site

출처

2017-09-04 AtlantisNaranja

우리는 개발자 도구 '시뮬레이터 휴대폰에 대한 픽셀 너비 값을 통해 어떤 웹 사이트를 보면 노키아 N9, 삼성 아이폰 5에 대한이 320의 범위, 360 픽셀에서있는 전화 모습입니다 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 배경은 바로 크롬 DEVS https://developer.chrome.com/multidevice/webview/pixelperfect

출처

2017-09-04 19:02:52

나는 당신의 솔루션을 시도했지만 내가 바로 그 일을하고 있지 않다거나 작동하지 않는에서

좋은 가이드를 다양합니다. 이것은 정말로 나를 미치게합니다. – AtlantisNaranja

스테이징을 변경하고 알려 주실 수 있습니까? –

모든 dppx 장치에 동일한 이미지를 사용하고 있습니다. 각 픽셀 밀도가있는 이미지에 대해 3 가지 이미지를 사용해야합니다. https://www.html5rocks.com/en/mobile/high-dpi/ 비비의 이미지가 포함 된 예를보세요. –

모바일 장치에서 배경 이미지가 흐릿함

답변

관련 문제