Behobener Hintergrund unabhängig von der Browserposition (Bild zur Erklärung enthalten!)

Question

Wenn möglich, würde ich dies in HTML/CSS/JS tun, aber wenn nicht, geht alles.

Ich versuche, den Hintergrund für eine Webseite festzulegen, um eine Art absolute Position zu haben, die dort bleibt, unabhängig davon, wo das Browserfenster auf dem Bildschirm und unabhängig von der Größe ist.

Bild zur Verdeutlichung:

(Explaination für Bild: Red outline Browser-Fenster ist, das Licht blau-transparent Bild ist die Position und Größe, dass das Bild immer haben soll)

Answer 1

Sie können die Bildschirmposition des Fensters mit window.screenX und window.screenY abrufen. Dann können Sie, dass mit einem einfachen Intervalltimer verfolgen:

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

(Das nutzt jQuery, aber es ist nicht notwendig.)

Here is a jsbin to demonstrate. Es ist ein wenig nervös, aber es wird wahrscheinlich aufheizen Client-Maschinen, wie es steht also würde ich den Timer nicht viel schneller laufen lassen. Das Problem ist, dass der Browser zwar über Änderungen der Fenstergröße (das "resize" -Ereignis) informiert, aber nicht über Ereignisse über das verschobene Fenster informiert.

Hier ist eine etwas effizientere Version ohne jQuery und mit einigen Überprüfungen, um zu vermeiden, den Stil zu berühren, wenn das Fenster nicht verschoben wurde. This doesn't seem to make Firefox or Chrome go too nuts läuft sogar alle 15 Millisekunden:

(function() { 
    var sx = window.screenX, sy = window.screenY; 

    setInterval(function() { 
    if (window.screenX !== sx || window.screenY !== sy) 
     document.body.style.backgroundPosition = 
     -(sx = window.screenX) + 'px ' + -(sy = window.screenY) + 'px'; 
    }, 15); 
})()