Image plane not stable

I have an experience where I lay 2 3D models on the ground and have an image behind them floating in air. The image also has a text image added on top of it. I want the user to go close to the image to read, but it does not stay stable in the position and keeps moving back.

Code


<a-assets>
    <img id="bgImage" src="assets/bg_image.png"></a-asset-item>
    <img id="logoImage" src="assets/logo_image.png"></a-asset-item>
    <img id="textImage" src="assets/text_image.png"></a-asset-item>
  </a-assets>
<a-entity id="main" scale="1 1 1" position="0 -2 -10" shadow="receive: false">
    <!--       3D model 1    -->
    <!--       3D model 2    -->
    <a-entity position="5 15 -30">
      <a-image src="#bgImage" width="30" height="30"></a-image>
      <a-image src="#logoImage" width="10" height="10" position="0 8 1"></a-image>
      <a-image src="#textImage" width="20" height="20" position="0 -5 4"></a-image>
    </a-entity>
  </a-entity>

Can you share a link to a video and or a gif of what you are experiencing? More information would be helpful.