"position”と“z-index”と”border-radius”を、下記にコードのように適切なところに設定すれば、
希望通りにtextareaの中央に丸形の画像が表示されるようになるようです。
*画像のサイズによって、それぞれの数値を変えて調節します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function circle1(){
document.getElementById('round').style.backgroundImage="url(https://〇〇〇.jpg)";
document.getElementById('round').style.backgroundRepeat="no-repeat";
document.getElementById('round').style.backgroundSize=80;
document.getElementById('round').style.backgroundPosition="top 30% center";
document.getElementById('round').style.opacity=1;
setTimeout('circle2()',10000);
}
function circle2(){
document.getElementById('round').style.backgroundImage="url(https://×××.jpg)";
document.getElementById('round').style.backgroundRepeat="no-repeat";
document.getElementById('round').style.backgroundSize=100;
document.getElementById('round').style.backgroundPosition="top 50% left 50%";
}
//-->
</script>
<center>
<div>
<span id="round" style=" border-radius:50%; position:absolute; z-index:20; width:5%; height:9%; top:20%; left:48%;& opacity:0;">
</span>
<textarea id="textArea" rows=20 cols=60 style="position:relative; z-index:10;"></textarea>
</div>
<br><br>
<INPUT TYPE="button" ONCLICK="circle1();" value="ボタン">
</center>