Para rellenar un texto con una imagen necesitamos que éste sea transparente y recortar el fondo a la forma de dicho texto. Para ello usamos las propiedades CSS background-clip: text y -webkit-text-fill-color: transparent.
En la propiedad background indicamos la URL de la imagen que vamos a usar como fondo del texto.
Usaremos -webkit para asegurar la compatibilidad con todos navegadores y, además, la propiedad color e indicamos un color de fondo por si algo falla (por ejemplo que la URL de la imagen no exista).
Aplicamos las propiedades a través de una clase CSS para poder usarlas solo en los textos que nos interese, aunque también se pueden aplicar a un selector.
Este es el fragmento de código resultante:
.texto-fondo-imagen {
background: #0d0628 url('https://tudominio.com/tuimagen.ext');
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
color: #0d0628;
}Lenguaje del código: PHP (php)Y este, el resultado:
TEXTO CON UNA IMAGEN DE FONDO
El resto de la propiedades del texto, como la alineación o el tamaño, las aplicamos mediante el método que usemos habitualmente, teniendo en cuenta que este efecto funciona mejor con textos grandes.
