Hola
Hay un error conceptual importante aquí.
El color de fondo de un elemento HTML no es heredable, pueden revisarlo
aquí.
Como ven, lo que ocurre, es que el valor por defecto de todos los elementos es
transparent, por lo tanto, si aplican un color a un elemento y posicionan este sobre una capa con un color definido, el color del padre no afectará al hijo.
El párrafo anterior suena evidente, pero condeiren esto, si en su navegador cambian el color de fondo por defecto de las páginas y navegan a un sitio en el que no se han definido colores, verán las cosas con ese color de fondo. Lo que están viendo, es el color que el navegador asigna al elemento raíz, y a partir de ahí, los demás, siendo transparentes, parecen heredar la propiedad.
La respuesta correcta a la pregunta planteada, es que hay que definir un color de fondo a la capa que quiere que esté encima; los posibles valores son transparente (por defecto), un color o heredar el del padre. Como en este caso, lo que quiere no es heredar, automáticamente deja fuera dos de las tres opciones.
Felicidad