Легко используйте большие фоновые изображения на веб-страницах.

Question

Я хочу иметь на своем сайте огромные фоновые изображения, но при этом пользователю не будет сложно их загрузить, а сайт будет выглядеть уродливо при загрузке фона.

Их размер не превышает 1920 X 1080, однако в килобайтах/мегабайтах это сказать сложно.

Какие у меня есть варианты и какие из них наиболее эффективны?

Меня не слишком беспокоит пропускная способность, просто хочу, чтобы пользователь думал, что все выглядит хорошо;)

Answer 1

Один из вариантов — использовать несколько фонов.Сделайте небольшой фон в качестве нижнего слоя и покройте его более крупным фоном.

Возможно, будет сложно иметь два фона, если вы хотите, чтобы они были на теле. и хочу поддержать IE.Решение может заключаться в том, чтобы начать использовать меньший фон тела, используя JS, чтобы изменить фон с низким разрешением на фон с высоким разрешением после загрузки:

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

---

Имейте в виду, что для такого большого фона требуется больше оперативной памяти, чем есть в некоторых мобильных браузерах (iPhone до 3GS либо вообще откажется декодировать такое изображение, либо начнет в панике очищать кэш/содержимое вкладок).

Последнюю проблему можно обойти с помощью CSS Media Queries:

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

Кроме запроса max-device-width вместо (виртуальный/увеличенный) max-width.