This part of my site features a background image. I am attempting to add a transparent overlay at the top of this section, as indicated by the red highlight. I want to achieve this effect using CSS without directly applying the overlay to the image. The red color is just for visibility, the actual overlay will match the colors of the boxes below. How can I create a transparent overlay that only covers a specific section of the image?
https://i.sstatic.net/ysNdW.jpg
<!-- Contact Section -->
<div id="contact">
<div class="container">
<h1><strong>Contact Summit</strong></h1>
<hr>
<div class="row">
<div class="col-md-6">
<div class="con-padded">
<form name="contactform" method="post" action="index.php" class="form-vertical" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control input-md" id="inputName" name="inputName" placeholder="Name">
</div>
<div class="form-group">
<label for="inputEmail1" class="control-label">Email</label>
<input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputSubject" class="control-label">Subject</label>
<input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
</div>
</div>
</div> <!-- end col-md-6 -->
<div class="col-md-6">
<div class="con-padded">
<div class="form-group">
<label for="inputPassword1" class="control-label">Details</label>
<textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default pull-right">
Send
</button>
</div>
</form>
</div>
</div> <!-- end col-md-6 -->
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end contact section -->
/*==================
CONTACT SECTION
===================*/
#contact{
background: url('../img/summit.jpg') no-repeat center center fixed;
background-size: 100% auto;
color: #FCFFF5; /*white*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 30px;
}
#contact h1 {
color: #FCFFF5; /*white*/
text-align: center;
}
#contact .col-md-6 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
margin: 0 auto;
}
.con-padded {
background-color: #282828; /*black*/
padding-top: 30px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;
opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;
height: 310px;
}