You need something like this

enter image description here

div { background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg'); width: 460px; height: 120px; } h1 { color: #444; text-align: center; padding: 20px 0; font-family: Arial; font-weight: 800; font-size: 62px; } 
 <div> <h1>Hello, World!</h1> </div>

    2 answers 2

    Example

     div { background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg'); width: 460px; height: 120px; } h1 { text-align: center; padding: 20px 0; font-family: Arial; font-weight: 800; font-size: 62px; background-color: #111; color: transparent; text-shadow: -2px 2px 4px rgba(255, 255, 255, .2); -webkit-background-clip: text; background-clip: text; } 
     <div> <h1>Hello, World!</h1> </div>

      This is a rough example. play with the shadows and achieve the desired result ...

       div { background: url('https://image.freepik.com/fotos-gratis/branco-tijolos-texturas-de-parede-de-fundo_1203-3691.jpg'); width: 460px; height: 120px; } h1 { color: #444; text-align: center; padding: 20px 0; font-family: Arial; font-weight: 800; font-size: 62px; text-shadow: 0 2px 1px rgb(100, 108, 42), 0 -2px 0 rgba(0, 0, 0, 1), 0 -2px 0 rgba(0, 0, 0, 0.5), 0 2px 0 rgba(200, 200, 200, .5); } 
       <div> <h1>Hello, World!</h1> </div>