親を同じとする子要素同士で、cssにて背景画像２枚を重ねることは可能なのでしょうか？

ヘディングのテキスト### 実現したいこと

ここに実現したいことを箇条書きで書いてください。

背景画像にロゴ画像を、両方ともcssで画像をリンクさせて重ねたい

前提

visual studio codeを使用しています。
ここに質問の内容を詳しく書いてください。
親を同じとする子要素同士で、cssにて背景画像２枚を重ねることは可能なのでしょうか？

発生している問題・エラーメッセージ

重ねた画像のうち、どちらか一方の画像しか反映されない。

エラーメッセージ

該当のソースコード

ソースコード

試したこと

優先順位なのか、記載の順番なのか、htmlやcssの順番を変えてみたり、
z-index　を再度付け直してみたり、しましたが、改善されませんでした。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
最初はhtmlで背景画像はcssで反映し、ロゴ画像はhtmlに記載していました。
その時は両方とも反映されていました。
そのあとhtmlで背景画像とロゴ画像をそれぞれクラスをつけて、cssで両方ともそれぞれbackground-imageとして記載したら、どちらかしか反映されなくなってしまいました。
どちらかというのは、最初の状態から再度同じ作業をしたら、次はロゴが反映されなくなったので、どちらかしか反映されないということがわかりました。
検証するとどちらも画像はリンクしていることは確認できます。

またロゴ画像を移動させてから、画像の周囲に枠の線ができてしまい、border: none;を設定しても全く消えません。

かなり調べましたが、この二つの現象は何が原因か全くわかりませんでした。
とりあえず今はロゴ画像をhtmlに戻して最初の状態で対処していますが、
なぜこのような現象が起きるのか、原因が知りたいです。

状況は
(最初の状態)
html

css
.mainphoto-inner {
position: relative;
max-width: 100%;
margin: 0 auto;
background-image:url(../images/main.new.jpg);
background-repeat: no-repeat;
width: auto;
height:400pX;
}
.absolute {
position: absolute;
left: 17%;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}

(変更後。エラー発生の状態。)
html

css
.mainphoto-inner {
position: relative;
max-width: 100%;
margin: 0 auto;
background-image: url(../images/main.new.jpg);
background-repeat: no-repeat;
width: auto;
height:400pX;
}
.absolute {
background-image: url(../images/logo.ol.svg);
width: 200px;
height: 250px;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 23%;
top: 45%;
transform: translateY(-50%);
z-index: 1;
}