テキストエリア内の中央で、画像をbackgroundとして使ってそれを丸形で表示させるには

"position”と“z-index”と”border-radius”を、下記にコードのように適切なところに設定すれば、
希望通りにtextareaの中央に丸形の画像が表示されるようになるようです。
＊画像のサイズによって、それぞれの数値を変えて調節します。

<style>
.absolute {
                   position: absolute;
                   z-index:20;
                   border-radius:50%;
                   width:5%;
                   height:20%;
                   top:20%;
                   left:48%;  
}

.relative {
           position:relative;
           z-index:10;
}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--

function circle1(){
document.getElementById('circle-image').style.backgroundImage="url(https://〇〇〇.jpg)";
document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
document.getElementById('circle-image').style.backgroundSize=80;
document.getElementById('circle-image').style.backgroundPosition="top 30% center";
       setTimeout('circle2()',10000);
}

function circle2(){
document.getElementById('circle-image').style.backgroundImage="url(https://×××.jpg)";
document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
document.getElementById('circle-image').style.backgroundSize=100;
document.getElementById('circle-image').style.backgroundPosition="top 50% left 50%";
}

  //-->
 </script>

 <center>
   <div style="position:relative; height:auto; width:980px;">
     <textarea class="relative" rows=20 cols=60></textarea>
     <span id="circle-image" class="absolute"></span>
   <br><br>
     <INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
   </div>
 </center>

丸形に書き換えた画像ファイルを用意して backgroundImage に指定しましょう。それが一番簡単な解決方法です。

別解:
clip-pathというCSSプロパティがありますが、clip-path: circle(50px); のように指定するとマッチする要素のものが丸く切り取られて表示されます。ただし、これは背景画像ではなくて要素全体(この場合、<textarea>全体)が切り取られますので、clip-pathを指定するだけでは目的の動作にはなりません。丸くする背景画像専用の要素を用意して、背景を透明にした<textarea>とうまく重ねる工夫が必要です。