How to have background color only when header is "revealed" Polymer

I would like to recreate the behavior in this demo where the header background is transparent unless the header is being "revealed".

https://www.webcomponents.org/element/polymerelements/app-layout/v2.1.1/demo/app-header/demo/music.html

I have set the effects and reveals attributes.

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
     <a href="/">Home</a>
     <a href="/values">Value Proposition</a>
     <a href="/manufacturers">Manufacturers</a>
     <a href="/our-team">Our Team</a>
  </app-toolbar>
</app-header>

Is there a CSS selector that I can use to have a white background when the header is in the revealed state and transparent otherwise?

i.e. transparent when scroll position is < 30px and white when scroll position is >= 30 px.

The docs state that app-header has two background layers that can be used for styling when the header is condensed or when the scrollable element is scrolled to the top, but I am not seeing where / how to select them.

Setting

app-header {
  background: rgba(255,255,255,0);
  --app-header-background-front-layer: {
    background: rgba(255,255,255,1);
  };
  --app-header-background-rear-layer: {
    background: rgba(255,255,255,0);
  };
}

has no effect.

Solution

The header in the linked demo fades out its background only when the scroll position is at the top. To enable it, add fade-background to <app-header>.effects and use the --app-header-background-rear-layer CSS property to set a background color to be visible when the scrollbar is revealed:

<style>
  app-header {
    @apply --layout-fixed-top;
    --app-header-background-rear-layer: {
      background-color: #fff;
    };
  }
</style>
<app-header effects="fade-background" ...></app-header>

Note the --app-header-background-front-layer CSS property is not used for this effect.

demo