"Heading - Background image masked heading"
Bootstrap 4.1.1 Snippet by webui

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row fancy-grid"> <div class="fancy-heading"> <h1 class="animated_heading" style="background-image: url(https://themegoods-cdn-pzbycso8wng.stackpathdns.com/musico/demo/wp-content/uploads/2018/10/ruvim-noga-711147-unsplash.jpg);">WebUI<br>A j e e t</h1> </div> </div> </div>
.fancy-heading { font-size: 160px; font-weight: 700; text-transform: uppercase; line-height: 1.1em; letter-spacing:5px; } .animated_heading { margin: 0; font-size: 80px; color: #fff; background-size: auto 200%; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 8s linear infinite; }

Related: See More


Questions / Comments: