div height as same as background image with min height

Question

I'm trying to put a responsive form inside a div with a background image that takes the full width off the screen. After searching around a while it seemed the best option to make the background image div the full size of the image was to work with a padding-bottom the size of the image. The problem now is, when I watch it on smaller screens the background image div is to small to fit the content of the form. I tried using min-width:100% but that didn't help.

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;
}

RasmusGlenvig RasmusGlenvig · Accepted Answer · 2016-04-01T10:26:11

Maybe it's because you're not closing the form tag?

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

div height as same as background image with min height

1 Answers