Las respuestas dadas no me convencen ya que la imagen esta sobre el texto... aquí te dejo un ejemplo estando la imagen detrás del texto: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> div { position: relative; font-weight: bold; } div: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 */ } div: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 */ } <!-- language: lang-html --> <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div> <!-- end snippet --> **Edit:** Con tu ejemplo dado sería algo parecido a esto: <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-css --> .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 */ } <!-- language: lang-html --> <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> <!-- end snippet -->