<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <svg viewBox="0 0 600 300"> <!-- Pattern --> <pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70" y="35"> <!-- Fire --> <image xlink:href="https://tympanus.net/codrops-playground/assets/images/posts/23145/fire.gif" width="256" height="300"/> </pattern> <!-- Text --> <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text" > Noor </text> </svg>

/* Main styles */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:800); .text { fill: url(#p-fire); stroke: #330000; stroke-width: 8; stroke-opacity: .5; } /* Other styles */ html, body { height: 100%; } body { background: #000; background-size: .2em 100%; font: 14.5em/1 Open Sans, Impact; text-transform: uppercase; margin: 0; } svg { position: absolute; width: 100%; height: 100%; }