Add logo before the image in CSS-CodePudding

I am trying to add a logo above the FIRST avatar photo/image inside the .

Here's how the HTML looks like:

<div >
<!-- FIRST ITEM -->
<div >
   <div >
        <span >
            <span style="display: block; max-width: 100%; width: 360px">
            <img height="360" width="360" sizes="100vw"  srcset="/img/avatar-photo-1.jpg" loading="lazy">
        </span>
    </span>
   </div>

</div>

<!-- SECOND ITEM -->
<div >
    <div >
         <span >
             <span style="display: block; max-width: 100%; width: 360px">
             <img height="360" width="360" sizes="100vw"  srcset="/img/avatar-photo-2.jpg" loading="lazy">
         </span>
     </span>
    </div>
</div>

</div>

What I did is to select it like this:

.cn-list-row .cn-list-item:first-child:before img{
    content: '';
    background-image: url('https://backtowuve.com/wp-content/uploads/2021/01/wuve-logo.png');
    width: 100px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    top: 120px;
    right: 50px;
}

This however did not work. How can I select the FIRST child and add the logo like this image:

INSERTED IMAGE

CodePudding user response：

.cn-list-row:first-child .cn-list-item:before img {
    content: '';
    background-image: url('https://backtowuve.com/wp-content/uploads/2021/01/wuve-logo.png');
    width: 100px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    top: 120px;
    right: 50px;
}