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


下記のコードは、ボタンを押すと、テキストエリアの中央で画像が10秒後に切り替わるものです。  
このように、画像をbackgroundとして使う場合に、テキストボックスの中央で画像の形状(＊circle1(),  
circle2()内の画像は、ともに"丸形”)も変えるには、どのように書けばいいのか分かりません。  
分かる方は、教えていただけませんでしょうか。

[code]

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    function circle1(){
    document.getElementById('textArea').style.backgroundImage="url(https://〇〇〇.jpg)";
    document.getElementById('textArea').style.backgroundRepeat="no-repeat";
    document.getElementById('textArea').style.backgroundSize=80;
    document.getElementById('textArea').style.backgroundPosition="center center";
           setTimeout('circle2()',10000);
    }
    
    function circle2(){
    document.getElementById('textArea').style.backgroundImage="url(https://×××.jpg)";
    document.getElementById('textArea').style.backgroundRepeat="no-repeat";
    document.getElementById('textArea').style.backgroundSize=80;
    document.getElementById('textArea').style.backgroundPosition="center center";
    }
    
      //-->
     </script>
    <center>
    <textarea id="textArea" rows=20 cols=60></textarea>
    <br><br>
    <INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
    </center>
    
[/code]




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

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




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

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

