Background/element goes black when entering Fullscreen with HTML5

None of the other answers is working for me (Chrome 70 or FF 63)

Adding this to the CSS file does work

::backdrop
{
    background-color: white;
}

The default background color of the browser's full-screen "visual environment" is black. Your content actually is there, but it's currently black text on black background, so you can't see it (try highlighting or pressing Ctrl+A to see for yourself).

If you want to make the background a different color, you must specify a CSS rule to set the background-color property to something other than the default. This was once done universally by setting a background-color property applied to the fullscreened element selected with the :fullscreen pseudo-class, but now the correct way to do so is to modify the element's associated ::backdrop peudo-element.

#container::backdrop {
    background-color: rgba(255,255,255,0);
}

Note that :fullscreen pseudo-class still works as a selector to alter other properties of fullscreened elements, but cannot reliably cause any background-related properties to be rendered. (If you wanted to be really robust, you could apply your background to both ::backdrop and :fullscreen.)

So, to apply a background color to any fullscreened element (i.e., not restricting our styling to any particular element(s) of interest), with support for browsers that either don't support ::backdrop or don't support :fullscreen background styles, you could do:

:fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);
}