div Höhe wie das gleiche wie das Hintergrundbild mit min Höhe

Question

Ich versuche, eine ansprechende Form in einem div mit einem Hintergrundbild, dass die volle Breite vom Bildschirm nimmt. Nach der Suche nach einer Weile schien es die beste Option, um das Hintergrundbild div die volle Größe des Bildes zu machen war mit einem Padding-unten die Größe des Bildes zu arbeiten. Das Problem ist jetzt, wenn ich es auf kleineren Bildschirmen sehe das Hintergrundbild div zu klein ist, um den Inhalt des Formulars zu passen. Ich habe versucht, mit min-width: 100%, aber das hat nicht geholfen.

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

Vielleicht ist es, weil Sie nicht das Formular-Tag schließen?

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