Applying a transparent overlay through CSS

Question

This section of my website has an image for the background. I am trying to create a transparent overlay at the top of this section as highlighted below in red. I am trying to do this through CSS and not actually applying the transparent overlay on the actual image itself. I made it red so it's easier to see, but the actual color will be the same as the two boxes below. How can I create a transparent overlay that only covers a certain portion of the iamge?

<!-- Contact -->
<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 -->

/*==================
CONTACT
===================*/

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

Answer 1

One suggestion would be to add/update your CSS like this

#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;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

Code sample

#contact {
  background: url('http://lorempixel.com/600/300/nature/8/') 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;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Contact -->
<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 -->