Cut Text Photo

Cut text and photo background.

Upload your picture first to get your pictures address on blogger. Paste the address into your CSS file and then the first picture can be deleted.

BRETT

BRETT

HTML

Paste into page in html view.
<div class="bgClipBck">
<span class="bgClip5" style="font-size: 200px; font-weight: 900;">BRETT</span></div>

CSS

/*----------start-----------Photo in lettering--------------*/
.bgClip5 {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-BGumjCn9m8RsZii8uaqcwxrNpl7koJ8rzFLcCcbn0KHEjEvkTxpc8QvtFj6mrJ5AgtAKlUZGrWIMvedDlV3E4FBculCv_AXF6c16-B2UiunwFY2Hs2mwbS_M1_-Nh7gHjt2XtD9PUA9/s1600/brettpic.jpg');    
 -webkit-background-clip: text;
    -moz-background-clip: text;
      -ms-background-clip: text;
             background-clip: text;
 -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
      -ms-text-fill-color: transparent;
             text-fill-color: transparent;
             font-weight: 700;
      line-height: .8;
        color: black;
      position: relative;
      background-repeat: repeat;
      background-position: 0 0;
-webkit-animation: BackgroundAnimated 55s linear infinite;
            animation: BackgroundAnimated 55s linear infinite;
}
    @keyframes BackgroundAnimated {
     0% {background-position: 0% 0%}
            50% {background-position: 100% 100%}
   100% {background-position: 0% 0%}
}
@-webkit-keyframes BackgroundAnimated {
     0% {background-position: 0% 0%}
            50% {background-position: 100% 100%}
   100% {background-position: 0% 0%}
}
/*-----------end-----------Photo in lettering-----------*/

Step 1.
Paste CSS code above into themes - customize - advanced - css
Step 2.
Upload picture to the page you are using.
Switch to HTML view and copy address from html view.
As an example

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-BGumjCn9m8RsZii8uaqcwxrNpl7koJ8rzFLcCcbn0KHEjEvkTxpc8QvtFj6mrJ5AgtAKlUZGrWIMvedDlV3E4FBculCv_AXF6c16-B2UiunwFY2Hs2mwbS_M1_-Nh7gHjt2XtD9PUA9/s1600/brettpic.jpg

Step 3.
Paste the pictures address into the css code as the picture below shows.

Step 4.
Copy the above HTML code and paste into the blogger page you are creating.
Step5.
Publish and then add the new page to the pages gadget found in the Layout menu.