背景画像に連動させて、背景画像の左端の一定の割合の位置に文字を設置させる方法

①実現したいこと
MINDや「あなたの、マインドブロック解消法！」は画像に埋め込んであります。左にある文字群もそれと同様に、画面幅を変動した時に、背景画像に対して一定の位置に存在するようにしたいです。

②したこと
背景画像を設定しているdivの一つ内側にあるdivに対して、absolute left-[10%] top-[10vh]を設定した。
左の位置に関しては、ビューポートの左10％になるが、画面幅が大きくなると、画像が画面幅いっぱいを占めていないので、画像に対して一定の位置に存在しなくなる。
上の位置に関しては、なぜか全然変な位置になる。

③相談したいこと
画面幅を変動した時に、背景画像に対して左の文字群を一定の位置であるようにするにはどうしたらいいでしょうか？
以下コードです。

//index.tsx

<div className={`${styles.background} ${styles.fullHeightContainer} relative w-full overflow-hidden flex items-center justify-start py-0 box-border bg-cover bg-no-repeat bg-[top] text-center text-lightskyblue font-pistilli-pro px-[10px] xs:px-[15px] sm:px-[40px] md:px-[50px] lg:px-[60px]`} > <div className="absolute left-1/5 self-stretch flex flex-col items-center justify-center"> <div className="self-stretch flex flex-col items-start justify-center gap-[48px] text-left text-base font-hiragino-kaku-gothic-stdn"> <div className="w-full flex flex-col items-start justify-start gap-[10px] max-w-[100px] xs:max-w-[120px] sm:max-w-[180px] md:max-w-[280px] lg:max-w-[360px]"> <div className="self-stretch relative text-[8px] xs:text-[14px] mt-40 sm:mt-60 md:mt-70 "> あなたのマインドブロックは？ </div> <MindblockDescription /> </div> <div className="w-full flex flex-col items-start justify-start gap-[10px] max-w-[130px] sm:max-w-[180px] md:max-w-[250px] sm:gap-[2px] md:gap-[16px]"> <ConsicousnessLevel /> <ConsiousnessDescription /> </div> </div> </div> </div>

//styles.module.css

.background { /* 初期のデスクトップ用の背景画像 */ background-image: url('/desktop--3@3x.png'); background-size: contain; background-repeat: no-repeat; background-position: 50% 0; height:100vh; position:relative; }