Stile corpo elemento a schermo intero?

Question

Il mio sito ha applicato un'immagine di sfondo affiancata, che può essere vista dietro alle foto durante la transizione (la maggior parte delle foto riempie lo sfondo). Date un'occhiata qui: http://new.element17.com.

Se visualizzato a schermo intero, tuttavia (utilizzando il pulsante in alto a destra in Chrome/Mozilla), questa immagine di sfondo scompare e lo sfondo è quindi solo #fff. Come posso modellare questo?

Sulla base di una certa lettura, ho provato la seguente:

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);} 

Ma questo non comporterà alcun cambiamento. Qualche idea?

Answer 1

sono abbastanza sicuro se si effettua un certo elemento attivare la modalità a schermo intero, piuttosto che farlo sull'oggetto documento, è possibile poi lo stile da che verso il basso.

È necessario attivare il metodo requestFullScreen sull'elemento che si desidera rendere a schermo intero. In questo caso, è l'elemento radice html. Questo è il metodo che ho buttato insieme quando ne ho avuto bisogno:

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; 
     } 
    } 
} 

E gli stili diventerebbe:

:-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);} 

Ho messo insieme una pagina di esempio veloce che mostra in azione: Example (basta utilizzare la chiave di escape per uscire a schermo intero - Non mi sono preoccupato del pulsante di uscita)

Inoltre, in base allo the MDN docs in modalità schermo intero, nessuna versione di IE supporta la modalità a schermo intero e Opera utilizza la versione non prefissata per l'attivazione ma non lo fa supporta la pseudo-classe. Si consiglia di considerare l'aggiunta manuale di una classe agli elementi html o body quando si accede a schermo intero e rimuoverla quando si esce, se si desidera supportare pienamente Opera.

Un altro fatto interessante: the docs dicono Gecko e Webkit uso (prefisso) :full-screen per la pseudo-classe, ma la proposta attuale W3C utilizza :fullscreen - senza trattino tra le parole. Ho usato entrambi, giusto per essere sicuro ...

Answer 2

Penso di ottenere quello che vuoi, aggiungere lo sfondo a #slideshow in quanto questo è il div che è il contenitore quando va a schermo intero.

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