Кроссплатформенное растягивание фона на 100% используя backstretch.js.

Каждый веб-сайт, на котором в качестве фона используется изображение, может очень криво отображаться на различных устройствах. CSS решения, вроде 100% растягивания фона, корректно отображаются только на настольных компьютерах и паре-тройке планшетах.
Но на некотрых мобильных устройствах - смартфонах, планшетах, фон сайта может отображаться наполовину нужной высоты.

Для адаптации фона сайта может помочь замечательный JQuery - плагин - backstretch.js

Использование плагина для растягивания фона на весь экран:
$.backstretch("ссылка на ваш фон");

Да, все так просто. Но у плагина есть еще несколько достоинств.

Показ слайдов на заднем фоне


Сменивает изображения с заданным интервалом, изображений может быть любое количество.
$.backstretch([
      "ссылка на изображение 1"
    , "ссылка на изображение 2"
    , "ссылка на изображение 3"
  ], {duration: 3000, fade: 750});

Значение опции "duration" - это скорость смены картинок.
Значение опции "fade" - скорость исчезновения и появления картинки.

Смена фона при нажатии кнопок


По клику кнопки, меняется фоновое изображение:
$("#img1").click(function(e) {
    e.preventDefault();
    $.backstretch('Ссылка на изображение 1');
});
$("#img2").click(function(e) {
   e.preventDefault();
   $.backstretch('Ссылка на изображение 2');
});

#img1, #img2 - Селекторы кнопок, при нажатии которых меняется фон.

Фон на блочном элементе


Устанавливаем фон с помощью backstretch.js. Код почти такой же, как и при установке на общий фон сайта. Дополнительно дописывается селектор нашего блока.
$("#demo").backstretch("Ссылка на изображение");

Фон на блочном элементе