Edit: Con tu ejemplo dado sería algo parecido a esto:
.bg-primary {
position: relative;
font-weight: bold;
}
.bg-primary:before {
display: block;
content: '';
width: 50%;
height: 100%;
background: url("http://lorempixel.com/output/people-q-c-640-480-9.jpg") center no-repeat;
opacity: .5;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: -1; /* Ponemos debajo del text */
}
.bg-primary:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-color: rgba(71, 122, 52, .4);
position: absolute;
top: 0;
z-index: -2; /* Ponemos debajo del imagen y text */
}
<section class="bg-primary" id="nosotros">
<div class="barnner1" id="nosotros1">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Equipamiento profesional para la hostelería.</h2>
<hr class="light">
<p class="text-faded">Suministros Tres Árboles somos una empresa con más de veinte años de experiencia dedicada a la distribución de equipamiento profesional para la hostelería. Formamos parte de la red de operadores de Hoterali<font color="red">@</font> Group.</p>
<a href="#contacto" class="page-scroll btn btn-default btn-xl sr-button">Contacta</a>
</div>
</div>
</div>
</div>
</section>