Styling body element in fullscreen?

Question

My site has a tiling background image applied, which can be seen behind photos as they transition (most photos fill the background). Have a look here: http://new.element17.com.

When viewed in fullscreen, though (using the button in the top-right in Chrome/Mozilla), this background image disappears and the background is then just #fff. How can I style this?

Based on some reading, I've tried the following:

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

But this doesn't result in any change. Any ideas?

Answer 1

I'm pretty sure if you make a certain element enter full screen mode, rather than doing it on the document object, you can then style from that down.

You'll need to trigger the requestFullScreen method on the element you want to make full screen. In this case, it's the root html element. This is the method I threw together when I needed it:

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

And the styles would then become:

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

I've put together a quick example page showing this in action: Example (just use the escape key to exit full screen – I didn't bother with the exit button)

Also, according to the MDN docs on fullscreen mode, no version of IE supports fullscreen mode, and Opera uses the non-prefixed version for triggering, but doesn't support the pseudo-class. You might want to consider manually adding a class to the html or body elements when entering full screen, and removing it when exiting, if you want to fully support Opera.

Another interesting fact: the docs say Gecko and Webkit use (prefixed) :full-screen for the pseudo-class, but the actual W3C proposal uses :fullscreen – no dash between the words. I've used both, just to be safe...