background "se move" de acordo com o conteúdo

Olá,

Estou criando uma página como parte de um teste para um emprego (fingers crossed), mas me deparei com uma dificuldade. A página conta com um card onde 3 perguntas serão respondidas, quando respondo uma pergunta, o conteúdo da próxima é carregado e são nestes momentos que vejo que o bg muda, pois os cards acabam tendo tamanho diferente. Será que podem me ajudar? Segue código.

html

<main class="design-card">
    <section class="title-quiz">
      <div
        class="d-flex flex-column flex-md-row align-items-center bg-white border-bottom shadow-sm justify-content-md-center">
        <!--<img src="{{ asset('img/logo.png') }}" width="80%">-->
        <h3 class="big">TESTE</h3>
      </div>
    </section>

    <section class="quiz-box container" id="quiz">
      <div class="container-fluid">

        <div>
          <div class="row justify-content-md-center">
            <div class="col-md-6">
              <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center" id="maincontent_id">
                <h1 class="display-5 MyFont" id="titulo_id">{{ $myquiz->titulo}}</h1>
                <p class="lead" id="subtitulo_id">{{$myquiz->subtitulo}}</p>
              </div>


              <div class="card-deck text-center" id="go_id">
                <div class="card shadow-sm">
                  <div class="card-header">
                    <h5 class="my-0 font-weight-normal"> <b id="questaoatual_id">{{ $questao_atual }} </b>
                      <small class="text-muted">/</small>
                      <small class="text-muted"> <b id="total_id">{{ $total_questoes }} </b></small></h5>
                    <br>
                    <div class="progress " id="progressbar_id">

                    </div>
                  </div>
                  <div class="card-body">
                    <h1 class="card-title pricing-card-title" id="pergunta_id">{{$pergunta}}</h1>
                    <div id="respostas_id"></div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>

CSS

.design-card {
  background: url("../img/bg.jpg");
  overflow: hidden;
  width: 100%;
  background-repeat: round;
}

.container {
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 10px;
}