Fullscreen API change default color

Question

I'm using the fullscreen api and the default color for the border is black as seen in this image:

Image is from http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html.

I would like to change this background color to a different color. Assuming the div has id #content, I've tried using

#content::backdrop {
  background-color: red;
}

but this did not work for me.

How do I change the color?

Answer 1

You need to use the :fullscreen CSS pseudo-class with vendor info. You can see a nice tutorial with an example here and docs here.

I've added the following to your example and it worked for me:

#myimage:fullscreen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-webkit-full-screen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-moz-full-screen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

#myimage:-ms-fullscreen {
  background-color: green;
  width: 100vw;
  height: 100vh;
}