CODEWITHSUNDEEP
htmlcsshtml5-fullscreen
Alan Liang
Alan Liang

Reputation: 358

Fullscreen API change default color

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

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?

Upvotes: 3

Views: 1236

Answers (1)

Zanon
Zanon

Reputation: 30770

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

Upvotes: 3

Related Questions