Styling Körperelement im Vollbildmodus?

Question

Meine Website hat ein Kachelhintergrundbild, das hinter Fotos während des Übergangs angezeigt wird (die meisten Fotos füllen den Hintergrund). Schau mal hier: http://new.element17.com.

Wenn Sie jedoch im Vollbildmodus (mit der Schaltfläche oben rechts in Chrome/Mozilla) angezeigt wird, verschwindet dieses Hintergrundbild und der Hintergrund ist dann nur #fff. Wie kann ich das gestalten?

Basierend auf etwas zu lesen, habe ich folgende versucht:

body:-webkit-full-screen {background-image:url(../images/olive.jpg);} 
body:-moz-full-screen {background-image:url(../images/olive.jpg);} 
body:-ms-full-screen {background-image:url(../images/olive.jpg);} 
body:-o-full-screen {background-image:url(../images/olive.jpg);} 
body:full-screen {background-image:url(../images/olive.jpg);} 

Aber diese keine Änderung zur Folge hat. Irgendwelche Ideen?

Answer 1

Ich bin mir ziemlich sicher, wenn Sie ein bestimmtes Element Vollbild-Modus machen, anstatt es auf dem Dokument-Objekt zu tun hat, können Sie Stil aus, dass nach unten.

Sie müssen die Methode requestFullScreen für das Element auslösen, das Sie im Vollbildmodus anzeigen möchten. In diesem Fall ist es das Stammelement html. Dies ist die Methode, die ich zusammen warf, wenn ich es brauchte:

function enter_full_screen(){ 
    elem = document.getElementsByTagName('html')[0]; 
    calls = ['requestFullScreen','webkitRequestFullScreen','mozRequestFullScreen']; 

    for(var i = 0; i < calls.length; i++){ 
     if(elem[calls[i]]){ 
      elem[calls[i]](); 
      return; 
     } 
    } 
} 

und die Stile wäre dann:

:-webkit-full-screen body {background-image:url(../images/olive.jpg);} 
:-moz-full-screen body {background-image:url(../images/olive.jpg);} 
:full-screen body {background-image:url(../images/olive.jpg);} 

Ich habe ein kurzes Beispiel Seite zusammengestellt dies in Aktion zeigt: Example (nur Verwenden Sie die Escape-Taste, um den Vollbildmodus zu beenden - ich habe mich nicht mit dem Beenden-Button beschäftigt)

Auch, nach the MDN docs im Vollbild-Modus, unterstützt keine Version von IE Vollbild-Modus, und Opera verwendet die nicht-prefixed-Version für die Auslösung , tut es aber nicht unterstützt die Pseudo-Klasse. Vielleicht möchten Sie in Betracht ziehen, den Elementen html oder body manuell eine Klasse hinzuzufügen, wenn Sie den Vollbildmodus aufrufen und beim Beenden entfernen, wenn Sie Opera vollständig unterstützen möchten.

Eine weitere interessante Tatsache: the docs sagen Gecko und Webkit Verwendung (mit dem Präfix) :full-screen für die pseudo-Klasse, aber der tatsächliche W3C Vorschlag verwendet :fullscreen - keinen Bindestrich zwischen den Worten. Ich habe beide benutzt, nur um sicher zu sein ...

Answer 2

Ich denke, um zu bekommen, was Sie wollen, fügen Sie Ihren Hintergrund zu #slideshow als das ist die div das ist der Container, wenn es im Vollbildmodus geht.

#slideshow { 
    background: url("../images/olive.jpg") repeat scroll 0 0 transparent; 
}