Removing middle of image revealing text behind it

I have text behind the image, how do I remove it?

I want to punch out a hole in the image revealing the text.

How do I do that? https://jsfiddle.net/eL9x3zrt/

.window {
    display: table;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: black;
    position: relative;
  }
  
  .tcell {
    display: table-cell;
    padding: 18%;
    vertical-align: middle;
    text-align: center;
    font-family: New Times Roman;
    font-size: 18px;
    color: #00AAFF;
  }
  
  .windowframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://i.imgur.com/NDjQEdl.jpg);
    background-size: cover;
  }

<div class="window" style="">
  <p class="tcell" style="">I have text here.</p>
  <div class="windowframe" style=""></div>
</div>

>Solution :

If you put the tcell within the windowframe, you can push the text to the front. There are a number of ways you could end up with your desired effect, but the first thing that came to mind for me was:

Stack the elements by putting the tcell text within the window div and the the window div within windowframe. Then you can adjust the width and height of window so that the hole in the picture is the size you desire.

With a few slight changes, I created a large "hole" with the background visible and the same frame dimensions as before.

If you want the hole smaller, you can play around with the dimensions of window within the windowframe.