@import "components-theme";
@import "theme/components/grid";

.main-screen {
  height: 100%;
  background-image: url('img/background.svg');

  &__top {
    @include grid-row();

    padding-left: $basic-padding;
    padding-top: $half-padding;
    padding-right: $basic-padding;
  }

  &__header {
    padding: $basic-padding 0 $basic-padding $basic-padding;
  }

  &__nav {
    padding-left: $basic-padding;
  }

  &__body {
    @include grid-row();
    height: 100%;

    &-left {
      @include grid-column($side-nav-columns);
      height: 100%;
      background-color: $light-gray;
    }

    &-content {
      @include grid-column($content-columns);
      height: 100%;
      background-color: $shade-gray;
      overflow: hidden;
      @media #{$small-only} {
        @include grid-column($total-columns);
      }
    }
  }
}

@import "components-theme";
@import "theme/components/grid";

.main-screen {
  height: 100%;
  background-image: url('img/background.svg');
  background-size: 700px 700px;

  &__top {
    @include grid-row();

    padding-left: $basic-padding;
    padding-top: $half-padding;
    padding-right: $basic-padding;
  }

  &__header {
    padding: $basic-padding 0 $basic-padding $basic-padding;
  }

  &__nav {
    padding-left: $basic-padding;
  }

  &__body {
    @include grid-row();
    height: 100%;

    &-left {
      @include grid-column($side-nav-columns);
      height: 100%;
      background-color: $light-gray;
    }

    &-content {
      @include grid-column($content-columns);
      height: 100%;
      background-color: $shade-gray;
      overflow: hidden;
      @media #{$small-only} {
        @include grid-column($total-columns);
      }
    }
  }
}

Set background size to scale background image
Set background size to scale background image