Как сделать параллакс отзывчивым?

Question

Я использую плагин jQuery plax: https://github.com/cameronmcefee/plax

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

Но я не могу заставить его работать

Смотрите мою скрипку: http://jsfiddle.net/FfKgY/

Я думаю, что проблема с CSS:

  #shell { 
      display: block; 
      position: relative; 
      margin: 100px auto; 
      width: 100%; 
      max-width: 318px; 
      height: 100%; 
      max-height: 318px; 
      z-index: 1; 
      } 

      #plax-logo { 
      width: 136px; 
      height: 70px; 
      position: absolute; 
      top: 170px; 
      left: 90px; 
      z-index: 3; 
      background:#099; 
      } 

      #plax-sphere-1 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      z-index: 4; 
      top: 189px; 
      left: 191px; 
      background: #3CC; 
      } 

      #plax-sphere-2 { 
      width: 215px; 
      height: 215px; 
      position: absolute; 
      z-index: 2; 
      top: 100px; 
      left: 53px; 
      background: #3C9; 
      } 

      #plax-sphere-3 { 
      width: 93px; 
      height: 92px; 
      position: absolute; 
      top: 35px; 
      left: 32px; 
      z-index: 1; 
      background: #669; 
      } 

Answer 1

Я понял это сам.

Я добавил еще одну строку CSS

header img { 
width:100%; 
} 

Это сделал трюк

Answer 2

первый покинуть следующий раз, когда вы хотите сделайте отзывчивый сайт, возможно, стоит проверить foundation По-моему, это лучший отзывчивый шаблон вокруг. Увидев, что у вас уже есть страница, и, вероятно, вы не хотите начинать заново here - это ссылка на другое сообщение в Stack-overflow, которое может показаться вам полезным. Cheers, Marco

---

EDIT

---

if($(window).width() < 1670 && $(".banner").height() < 1253) 
{ 
    var bannerContent = $(".title").html() + $(".social").parent().html(); 
    $(".banner").html(bannerContent); 
} 
else 
{ 
    var bodyContent = $(".title").parent().html(); 
    $("body").html(bodyContent); 
} 

Вы можете использовать этот код для всей страницы, чтобы уменьшить его содержание. Как вы можете видеть: если ширина окна = < 1670, то это, если ширина = < 1500, то это и т. Д. И т. Д.