How can I stretch an image to fit 100% height of a div, preventing resize?

Question

I have a decoration image that should adapt two different sizes, a small one when it's login, and a larger one when It's sign up. I don't know how can I stretch this image to always fit 100% container's height. Even If it get a little distortion I wanna make this.

First I'll show the login, that actually the image decoration has no problem, this one fits correctly with current container:

But when I change to Sign up view, I want to stretch it to get 100% height of current container:

Here it is my Vue component code, I don't know if it's necessary but here you are ( =

I know that maybe an easy question, but I'm trying many always and can't really do it. Thanks a lot.

<template>
  <section id="signup" class="overflow-hidden">
    <v-row no-gutters>
      <v-col sm="12" md="6" class="primary white--text">
        <div class="d-flex">
          <div style="text-align: center" class="pa-5">
            <img
              width="50%"
              class="center"
              src="/static/logomarca.png"
              alt=""
            />
            <div style="text-align: center" class="mt-10">
              <p class="" style="font-size: 28px">
                Conheça o poder da <b>Inteligência Artificial</b> e da
                Psicometria unidas
              </p>

              <p class="mt-12" style="font-size: 24px">
                Automação de recrutamento e seleção pessoal
              </p>
            </div>
          </div>

          <div class="d-flex justify-end align-stretch" style="heigth:100%">
            <img src="/static/line-decoration2.png" />
          </div>
        </div>
      </v-col>

      <v-col class="pa-5 white primary--text" cols="12" sm="12" md="6">
        <div class="d-flex flex-column justify-center">
          <section-header v-if="option == 0" sub-header="Criar conta" />
          <section-header v-if="option == 1" sub-header="Login" />

          <v-sheet v-if="option == 0" color="transparent" max-width="600">
            <base-heading class="ml-3 primary--text"> E-mail </base-heading>
            <v-text-field outlined rounded color="primary" label="" solo flat />

            <base-heading class="ml-3 primary--text">
              Nome completo
            </base-heading>
            <v-text-field outlined rounded color="primary" label="" solo flat />

            <base-heading class="ml-3 primary--text"> CPF </base-heading>
            <v-text-field outlined rounded color="primary" label="" solo flat />

            <base-heading class="ml-3 primary--text">
              Data de nascimento
            </base-heading>
            <v-text-field outlined rounded color="primary" label="" solo flat />

            <base-heading class="ml-3 primary--text"> Senha </base-heading>
            <v-text-field
              outlined
              rounded
              type="password"
              color="primary"
              label=""
              solo
              flat
            />

            <base-heading class="ml-3 primary--text">
              Confirmação da senha
            </base-heading>
            <v-text-field
              outlined
              rounded
              type="password"
              color="primary"
              label=""
              solo
              flat
            />

            <v-btn
              rounded
              elevation="0"
              id="btnAbout"
              color="white"
              class="primary--text"
              x-large
              >Cadastrar
            </v-btn>

            <v-btn
              rounded
              elevation="0"
              id="btnAbout"
              color="primary"
              class="white--text ml-3"
              x-large
              @click="changeOption"
              >Login
            </v-btn>
          </v-sheet>
        </div>
        <v-sheet v-if="option == 1" color="transparent" max-width="600">
          <base-heading class="ml-3 primary--text"> E-mail </base-heading>
          <v-text-field outlined rounded color="primary" label="" solo flat />

          <base-heading class="ml-3 whprimaryite--text"> Senha </base-heading>
          <v-text-field
            outlined
            rounded
            type="password"
            color="primary"
            label=""
            solo
            flat
          />

          <v-btn
            rounded
            elevation="0"
            id="btnAbout"
            color="white"
            class="primary--text ml-4"
            x-large
            >Login
          </v-btn>

          <v-btn
            rounded
            elevation="0"
            id="btnAbout"
            color="primary"
            class="white--text ml-3"
            x-large
            @click="changeOption"
            >Cadastrar
          </v-btn>
        </v-sheet>
      </v-col>
    </v-row>
  </section>
</template>

<script>
export default {
  data: () => ({
    signup: true,
    option: null,
  }),
  mounted() {
    this.option = this.$route.params.option;
    if (!this.option) {
      this.option = 0;
    }
  },
  methods: {
    changeOption() {
      if (this.option == 0) {
        this.option = 1;
      } else {
        this.option = 0;
      }
      document.getElementById("signup").scrollIntoView();
    },
  },
};
</script>

<style scoped>
.right{
    position: fixed;
    right: 0;
}
</style>

I tried a second solution, to make a div with background-image repeting it, but I don't know why when I do it the image doesn't appear

  <div class="background-decoration">

  </div>

<style scoped>
.background-decoration{
  background-repeat: repeat;
  background-image: url("/static/line-decoration2.png");
}
</style>