He creado 4 columnas. Cada columna consta de una imagen, donde quiero colocar texto sobre cada imagen.

Para lograr esto, obviamente necesito establecer la imagen como fondo. Soy consciente de que esto se puede lograr a través de CSS (que es lo que estoy haciendo actualmente), pero me gustaría colocar la imagen como fondo, dentro de mi archivo HTML. La razón; para que pueda ingresar el texto 'alt' relevante para fines de SEO.

¿Cómo puedo lograr esto mejor?

0
Craig 8 mar. 2017 a las 05:53

2 respuestas

La mejor respuesta

Simplemente coloque img en el contenedor col, configure ese elemento en position: relative; y luego use la posición absolute para colocar el texto sobre la imagen.

* {margin:0;}
.col {
  float: left;
  width: 25%;
  position: relative;
}
img {
  display: block;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: black;
  color: white;
  padding: 1em;
}
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
3
Michael Coker 8 mar. 2017 a las 03:00
#img-as-background {
  position: relative;
  overflow: hidden;
}
#img-as-background .container {
  height: 500px;
  padding: 20px;
}

#img-as-background img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
}
<div id="img-as-background">
  <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" />
 <div class="container">
  Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text 
 </div> 
</div>
1
Đào Minh Hạt 8 mar. 2017 a las 03:01