Div yüksekliği, min yükseklik ile arka plan görüntüsü ile aynı

Question

Ekranın tüm genişliğini alan bir arka plan görüntüsü ile bir div içinde duyarlı bir form yerleştirmeye çalışıyorum. Bir süre arandıktan sonra, arkaplan görüntüsü div'ini yapmak için en iyi seçenek göründü, görüntünün tam boyutu, resmin alt kısmında bir dolgu altıyla çalışmaktı. Sorun şu ki, daha küçük ekranlarda izlediğimde arka plan resmi div, formun içeriğine sığacak kadar küçük. Min-width kullanmayı denedim:% 100 ama bu yardımcı olmadı.

html:

<div class="background-image-div"> 
    <div class="centerer-div"> 
     <form id="form"> 
      "some form stuff" 
     </form> 
    </div> 
</div> 

css:

.background-image-div{ 
    background-image: url(background.png) 
    background-repeat: no-repeat; 
    background-position-x: center; 
    background-position-y: top; 
    width: 100%; 
    background-size: contain; 
    position: relative; 
    padding-bottom: 25%; 
} 
.centerer-div{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    height: auto; 
    display: table; 
    width: 100%; 
} 
#form{ 
    text-align: center; 
} 

Answer 1

Belki form etiketi kapanış değil çünkü?

<div class="background-image-div"> 
    <div class="centerer-div"> 
     <form id="form"> 
      "some form stuff" 
     </form> 
    </div> 
</div>