Ajuda com ajuste de background

Saudações gujizeiros, tenho uma página de checkout no meu site que é dividida em duas partes, uma sidebar bem grande que ocupa metade da tela, e um form que ocupa a outra parte, porém tem um problema…
A minha sidebar tem uma imagem de background que toda vez que a parte do formulário estende na altura, ela desajusta dessa forma:
image

Alguém sabe como posso fazer com que as duas telas expanda na altura juntas ?

Sidebar:

style="background: url('https://s3.amazonaws.com/=-static/instituicoes/background/<%= institution.background %>') no-repeat center center; background-size: cover; " <% } %>>
<%= institution.title %>
<%= institution.subtitle %>
<%= institution.question %>
<%= institution.name %>

FORM:

<%= institution.name %>
<% include ./donation-steps/login %>
<% include ./donation-steps/subscription_info %>
<% include ./donation-steps/payment_info %>
<% include ./donation-steps/user_info %>
<% include ./donation-steps/success.ejs %>

STYLE QUE USO ATUALMENTE:

  1. background: url(*) no-repeat center center;
  2. background-size: cover;

}

style.min.css:1

.subscription-page .sidebar {

  1. text-align: center;
  2. padding: 2%;

}
.subscription-page .sidebar {

  1. height: 100vh;
  2. text-align: center;
  3. padding: 2%;

define algumas divs ou porta o codigo.

Quando tenho esse problema uso o corel ou ps para deixar o formato da imagem o mais próximo do formato da div, e uso:

.div img{
    width: 100%;
    height: 100%;

}

1 curtida

Vou editar Hundea !!

então Daniel, Obrigado pela resposta.
Na verdade, minha imagem fica no formato e tamanho ideal da div, porém a página muda de altura em determinados pontos, dai eu queria que a imagem de background mudasse junto. Queria que ela “esticasse”.