En el diseño web en general, existen pocas cosas tan chulas y tan fáciles de hacer como poner una imagen de fondo con un texto flotando.
Claro está que, hay que saber elegir una buena foto y colocar el texto superpuesto en CSS. Este efecto es muy recurrente entre los diseñadores web freelance, pero después de tantos años de usarlo, no creo que pase nunca de moda. Así que a continuación, te voy a explicar cómo puedes crear este efecto en CSS, para poner un texto sobre una imagen en CSS (y HTML).
Este efecto es muy parecido al que vimos en el anterior vídeo, donde explicaba como como hacer efecto blur (borroso o desenfocado) en CSS.
Como poner texto flotante sobre imagen css
Vamos a hacer un pequeño ejemplo para mostrar como poner un texto superpuesto flotante.
Te dejo aquí el vídeo a continuación, ya sabes, por si no tienes ganas de leer.
Como siempre, primero nos vamos a encargar de la parte de HTML. En este caso, no nos vamos a complicar mucho la vida. Vamos a hacer un envoltorio con la clase wrap, que es donde vamos a poner la imágen de fondo. Y luego, vamos a crear otro div con la clase wrap-texto. Que es donde irá el texto superpuesto o flotante.
<div class="wrap">
<div class="wrap-texto">
<h1>Texto Superpuesto</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit hic tenetur rem quasi nulla quibusdam? Ducimus commodi temporibus quae placeat.</p>
</div>
</div>
Acto seguido, vamos a pasar a los estilos. Vamos a trabajar directamente con la clase wrap.
Marcaremos una anchura y una altura que ocupe toda la pantalla, usaremos flex-box para centrar el contenedor de dentro (.wrap-texto) y también lo centraremos.
Después colocaremos la propiedad de background con un linear-gradient.
Utilizar la propiedad background con un linear-gradient es un pequeño truco que se utiliza para que siempre haya un contraste entre el texto y la imagen de fondo. Tal y como explico en el vídeo, es una manera muy recurrente de que el texto superpuesto se vea correctamente.
Para finalizar, utilizaremos las propiedades de background-size y background-position para que la imagen de fondo guarde las proporciones que queramos.
.wrap{
width: 100vw;
height: 100vh;
display: flex;
align-items: end;
justify-content: center;
background: linear-gradient(to bottom, rgb(0 0 0 / .5),rgb(0 0 0 / .5)),url(/imagen.jpg);
background-size: cover;
background-position: center;
}
Por último, aplicaremos un par de propiedades al segundo div, con la clase wrap-texto. Le cambiamos el color para que se vea bien y lo centramos con un text-align (a la gente le encantan los textos centrados).
.wrap-texto{
color: #fff;
text-align: center;
width: 50%;
}
Y ya estaría todo hecho. Esta es una manera muy útil de poner un texto superpuesto o texto encima de una imagen.
Puedes usarlo en cualquier prácticamente en cualquier div o elemento de tu página web que tenga un fondo.
Recuerda que también puedes poner un efecto de sombra en el texto con CSS para que resalte y que el contraste sea aún mayor.
Y hasta aquí este mini tutorial, otro efecto de CSS que nos puede ayudar a conseguir un diseño web más atractivo.
Y ya sabes, si te has quedado con alguna duda o tienes alguna sugerencia puedes dejarla en los comentarios y te contestaré lo más rápido que pueda.