웹 페이지에서 큰 배경 이미지를 원활하게 사용합니다

Question

내 사이트에 거대한 배경 이미지를 갖고 싶지만 사용자에게 다운로드하는 데 어려움을 겪지 않고 사이트를 배경로드로 못 생겼습니다.

그것들은 크기가 1920 x 1080보다 크지 않지만 킬로 바이트/메가 바이트 측면에서 말하기는 어렵습니다.

여기에 내 옵션은 무엇이며 가장 효과적인 것은 무엇입니까?

나는 대역폭에 대해 너무 귀찮게하지 않고 모든 것이 멋져 보인다고 생각하기를 원합니다.)

Answer 1

한 가지 옵션은 여러 배경을 사용하는 것입니다. 하단 레이어로 작은 배경을 가지고 더 큰 배경으로 덮으십시오.

몸에 원한다면 두 개의 배경을 갖는 것이 까다로울 수 있습니다. 그리고 IE를 지원하고 싶습니다. 솔루션은 작은 신체 배경을 시작하는 것일 수 있습니다.

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

이러한 큰 배경에는 일부 모바일 브라우저보다 더 많은 RAM이 필요합니다 (iPhone Pre-3GS는 해당 이미지를 디코딩하는 것을 거부하거나 공황 상태에서 캐시/탭 컨텐츠를 제거하기 시작합니다).

후자의 문제는 CSS 미디어 쿼리와 함께 해결 될 수 있습니다.

http://lofotenmoose.info/css/destroy/media-queries-background-stretch/

쿼리를 제외하고 max-device-width 대신 (Virtual/Zoomed) max-width.