.backdrop-media {
    display:block;
    background: url("images/splash/ashe-default-splash.jpg");
    height: 700px;
    background-size: cover;
    background-position: top center;
}   

/* For larger screens, header background becomes a one-tile grid container 
  where both the background and content take up a tile.
  On narrower screens, there is no grid container so the background and content
  stack vertically.     
  */
@media screen and (min-width: 1200px) {
  .header-background-included {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 700px;
  }

  .header-background-included > * {
    grid-area: 1/1;
  }

  .backdrop-media {
    background: linear-gradient(225deg, rgba(0,0,30,0) 30%, rgba(0,0,30,0.9) 80%), url("images/splash/ashe-default-splash.jpg");
    height: 100%;
    background-size: cover;
  }   
}