положение фонового изображения, закрепленное за родительским элементом

У меня где-то на странице есть div, и мне нужно дать ему фоновое изображение, которое не перемещается при прокрутке окна браузера. Вот мой код:

#mydiv {
    float:left;
    width:540px;
    margin:40px 0px 0px 20px;
    background:url(/images/myimage.jpg) no-repeat fixed 0px 0px transparent;
}

Проблема в том, что мое фоновое изображение расположено относительно холста, и мне нужно, чтобы оно было расположено относительно #mydiv и по-прежнему не прокручивается.

Для иллюстрации проблему см. здесь http://jsfiddle.net/QPrUz/1/
В примере # div1 выглядит нормально, но # div2 не показывает фон на все так, как оно расположено относительно холста, а не # div2 .

Любые предложения приветствуются.

PS
iframe не подходит.