angutron/src/app/app.component.scss

#container {
  display: flex;
  position: relative;
  flex-grow: 1;
  height: 100%;
  .background-container {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    .preset {
      background-image: url('/assets/preset-light.png');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
    }
    .noise {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('/assets/noise.png');
      z-index: 2;
    }
  }
  >div {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    flex: 1 1 0%;
    >.content {
      position: relative;
      flex-grow: 1;
      flex-shrink: 0;
      display: flex;
      >div {
        display: flex;
        flex: 1 1 0%;
        flex-direction: column;
        >.title {
          background-color: rgba(0, 0, 0, 0.15);
          &>div {
            position: relative;
            color: rgb(255, 255, 255);
            height: 48px;
            display: flex;
            align-items: center;
            font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
            font-size: 15px;
            text-transform: uppercase;
            padding: 0px 24px;
            overflow: hidden;
            cursor: default;
            user-select: none;
          }
        }
        >.content {
          display: flex;
          flex: 1 1 0%;
          flex-direction: column;
          height: 500px; // background-image: url("/assets/christian-holzinger-755549-unsplash.jpg");
          // background-size: cover;
        }
      }
    }
  }
}