Skip to main content
se añadieron 953 caracteres en el cuerpo
Origen Enlace

Bueno no vi la necesidad de utilizar el after o before , Prueba este código:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;  
  

}

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.6);
}
   
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

Para el segundo ejemplo seria:

#container {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
}

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;   
  filter:brightness(0.4);
}
   
.detalle {
  position: absolute;  
  color:#fff;
  top: 0;
}
<div id="container">
  <div id="image">
  </div>

   <div class="detalle">
     <h2>TITLE TITLE</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
   </div>
</div>

Bueno no vi la necesidad de utilizar el after o before , Prueba este código:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;  
  

}

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.6);
}
   
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

Bueno no vi la necesidad de utilizar el after o before , Prueba este código:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;  
  

}

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.6);
}
   
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

Para el segundo ejemplo seria:

#container {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
}

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;   
  filter:brightness(0.4);
}
   
.detalle {
  position: absolute;  
  color:#fff;
  top: 0;
}
<div id="container">
  <div id="image">
  </div>

   <div class="detalle">
     <h2>TITLE TITLE</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
   </div>
</div>

Origen Enlace

Bueno no vi la necesidad de utilizar el after o before , Prueba este código:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;  
  

}

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.6);
}
   
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>