how to make parallax responsive?

Question

I am using the jQuery plugin plax: https://github.com/cameronmcefee/plax

I have made my own example and would like it to be responsive. Right now the position is absolute on the moving elements in the css, but I need it to be relative, so I can make it responsive.

But i can't get it to work

See my fiddle: http://jsfiddle.net/FfKgY/

I think the problem is with the 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

I figured it out myself.

I added another css string

header img {
width:100%;
}

This did the trick