El problema es que cuando le das opacity
a un elemento todo su contenido tendrá como minimo esa opacidad, puede tener más pero nunca menos.
Puedes usar un el pseudoelemento ::after
o ::before
y poner ahí la imagen y la opacidad que necesites:
.bg-primary {
background-color: #3A6324;
z-index: -2;
position: relative;
}
.barnner1 {
position: relative;
}
.barnner1::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/400/200/sports/1/");
background-repeat: no-repeat;
background-position: center;
opacity: 0.33;
z-index: -1;
}
<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>
ACTUALIZACIÓN
He editado mi respuesta para poner la imagen debajo del texto pero encima del color de fondo como sugiere @aldanux.
Los elementos con position:static
(la posición por defecto) no aceptan la propieda z-index
por lo que para que el div.bg-primary
quede por debajo de .barnner1::after
le he añadido tambien position:relative