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

Question

У меня есть 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.

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

P.S.
iframe не вариант.

Answer 1

Согласно комментарию Джавада, это невозможно с помощью CSS. В итоге я сменил фон на что-то повторяемое.

Answer 2

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

вот оно: http://jsfiddle.net/7kku4v1t/

Я только изменил:

background:url(http://i35.tinypic.com/4tlkci.jpg) fixed no-repeat;

до

background:url(http://i35.tinypic.com/4tlkci.jpg) 210px 0 fixed no-repeat;
                                                  ^^^^^^^
                                                  X     Y

Answer 3

MDN для fixed говорит:

Это ключевое слово означает, что фон зафиксирован относительно области просмотра.

Используйте scroll вместо fixed:

Это ключевое слово означает, что фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он эффективно прикреплен к границе элемента.)

Итак, полный код для липкого фона исправлен относительно самого элемента:

.sticky-background {
    background: url(...) no-repeat scroll;
}

Answer 4

Вы должны использовать некоторый JavaScript для достижения этого.