Scale image to full width - html

Question

I received a couple of images and I need them to scale over the whole width of the page, but in height, it should stay the same height for the purposes of the design. (Don't blame me, that's what the designer wants)
I have this HTML:
<section id="fotografie-intro">
<div class="details">
<h1>Fotografie</h1>
<span>Professionele, realistisch foto&apos;s gemaakt door een professionele fotograaf.</span>
<span>€ 75 <small>per set</small></span>
</div>
</section>
I have this CSS:
#fotografie-intro {
background: url(../img/unscaledPics/FOTOGRAFIE_headerfoto.jpg);
background-size: 100% 100%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
font-family: 'Titillium Web', sans-serif;
color: rgb(246, 246, 246);
}
#fotografie-intro .details{
background-color: rgba(0, 0, 0, 0.6);
width: 33.333333%;
}
#fotografie-intro h1 {
width: 350px;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 400;
text-align: center;
padding-top: 40px;
z-index: 88;
}
#fotografie-intro span {
display: block;
width: 250px;
padding-top: 20px;
text-align: left;
padding-left: 40px;
font-weight: 100;
}
#fotografie-intro span:last-child {
font-size: 2em;
padding-left: 40px;
}
Above screenshot is how it should not look.

Answer 1

You could go a couple of different ways.
Background-size should do the trick.
background-size:100% 400px;
In the example the width would be 100% and the height would be fixed to 400px
if you want an image to cover it no matter what you could go with
background-position: center;
background-size: cover;