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

Tienes que poner el elemento en posición absoluta y luego darle un ancho también (yo he puesto left:0 y right:0 que viene a ser parecido a width:100%), sino no se verá. El elemento padre, en este caso .fondo.fondo tiene que tener posición también para que sirva de referencia:

.fondo{
 background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
  background-size:cover;
  width:200px;
  height:500px;
  color:white;
  position:relative;
 }

.fondo:before{
  content:"";
  display:block;
  height:75%;
  background:#000;
  bottom:0;
  position:absolute;
  opacity: 0.4;
  left:0;
  right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>

Tienes que poner el elemento en posición absoluta y luego darle un ancho también, sino no se verá. El elemento padre, en este caso .fondo tiene que tener posición también para que sirva de referencia:

.fondo{
 background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
  background-size:cover;
  width:200px;
  height:500px;
  color:white;
  position:relative;
 }

.fondo:before{
  content:"";
  display:block;
  height:75%;
  background:#000;
  bottom:0;
  position:absolute;
  opacity: 0.4;
  left:0;
  right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>

Tienes que poner el elemento en posición absoluta y luego darle un ancho también (yo he puesto left:0 y right:0 que viene a ser parecido a width:100%), sino no se verá. El elemento padre, en este caso .fondo tiene que tener posición también para que sirva de referencia:

.fondo{
 background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
  background-size:cover;
  width:200px;
  height:500px;
  color:white;
  position:relative;
 }

.fondo:before{
  content:"";
  display:block;
  height:75%;
  background:#000;
  bottom:0;
  position:absolute;
  opacity: 0.4;
  left:0;
  right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>

Origen Enlace
user7176
user7176

Tienes que poner el elemento en posición absoluta y luego darle un ancho también, sino no se verá. El elemento padre, en este caso .fondo tiene que tener posición también para que sirva de referencia:

.fondo{
 background:url("http://lorempixel.com/output/abstract-h-c-200-500-4.jpg");
  background-size:cover;
  width:200px;
  height:500px;
  color:white;
  position:relative;
 }

.fondo:before{
  content:"";
  display:block;
  height:75%;
  background:#000;
  bottom:0;
  position:absolute;
  opacity: 0.4;
  left:0;
  right:0;
}
<div class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus placeat alias aut sed, nihil ducimus sit. Saepe dolorum incidunt eligendi, accusamus repudiandae, harum a ipsam, hic fugiat quam quisquam et.</div>