Исправлен фон независимо от позиции браузера (информация включена в изображение!)

Question

Если возможно, я бы предпочел сделать это в формате HTML/CSS/JS, но если нет, все будет.

Я пытаюсь установить фон для веб-страницы, чтобы иметь абсолютную позицию, которая останется там, независимо от того, где находится окно браузера на экране и независимо от размера.

Изображение разъяснений:

(Explaination для картины: Красный контур окна браузера, голубовато-прозрачная картина положение и размер, что картина всегда должна иметь)

Answer 1

Вы можете получить положение экрана окна с window.screenX и window.screenY. После этого вы можете отслеживать, что с помощью простого интервального таймера:

setInterval(function() { 
    $('body').css('backgroundPosition', 
       -window.screenX + 'px ' + -window.screenY + 'px'); 
}, 50); 

(Это использует JQuery, но это не обязательно.)

Here is a jsbin to demonstrate. Это немного нервничаю, но это, вероятно, разогреть клиентские машины, как она стоит поэтому я бы не запускал таймер слишком быстро. Проблема заключается в том, что, хотя браузер расскажет вам о изменениях размера окна (событие «изменить размер»), он не расскажет вам о событиях вокруг перемещаемого окна.

Вот несколько более эффективная версия без jQuery и с некоторыми проверками, чтобы не касаться стиля, когда окно не перемещено. This doesn't seem to make Firefox or Chrome go too nuts даже каждые каждые 15 миллисекундов: