Style element in full screen?

Question

My website has a background image that can be seen behind the photos as they transition (most photos fill the background). Take a look here: http://new.element17.com .

However, when viewed in full screen (using the button in the upper right corner in Chrome / Mozilla), this background image disappears, and the background is simply #fff . How can I style it?

Based on some readings, I 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 does not lead to any changes. Any ideas?

Answer 1

I am sure that if you make some element in full screen mode, instead of doing it on the document object, you can then stylize it down.

You need to run the requestFullScreen method for the item you want to do in full screen. In this case, this is the root of the html . This is the method I put together when I need 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 will 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 put together a quick example page demonstrating this in action: Example (just use the escape key to exit full screen mode - I didn’t touch the exit button)

In addition, according to MDN docs in full-screen mode, no version of IE supports full-screen mode, and Opera uses a non-prefix version for the trigger, but does not support the pseudo-class. You might want to manually add the class to the html or body elements when you enter full screen mode and delete it when you exit if you want to fully support Opera.

Another interesting fact: docs say using Gecko and Webkit (prefix) :full-screen for a pseudo-class, but the actual W3C sentence uses :fullscreen - no dashes between words. I used both to be safe ...

Answer 2

I think in order to get what you want, add your background in #slideshow , as this is a div that is a container when it comes out in full screen.

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