Logo duplicating across page

Hello, I was hoping you could help. The issue is the logo is duplicating on my site. I sort of got what I wanted, two pages with a reversed out logo (white on dark bgrd); except it is duplicating/nesting. Much appreciatedd if you could provide any feedback please.

I used CSS codes to start off with: 
uploaded the logo, realized I was on a personal plan, then had to use Block ID. copied and cut what I had in CSS and pasted into Block ID:

<style>

.header-title{

background-image:url(https://static1.squarespace.com/static/61fb724a2c79a70bbb1ae3ae/t/65f27b21a086465059d0c0fc/1710390055962/HBF+Logo+Inverted+-+Transperant.png);

background-size: contain

}

.header-title img{

opacity:0

}

</style>

When I inspect the element to look for block id's, it was all yui's.

<img elementtiming="nbf-header-logo-desktop" src="//images.squarespace-cdn.com/content/v1/61fb724a2c79a70bbb1ae3ae/b28edd13-ccfc-47f6-adfc-b073af3754b8/HBF+Logo+-+2018-Transperant.png?format=1500w" alt="Hayden Butler Foundation" style="display:block" fetchpriority="high" loading="eager" decoding="async" data-loader="raw">

I deleted the alternate logo HBF+Logo+Inverted+-+Transperant.png because there was a duplicate I could select, which bought me to this outcome.

Look forward to hearing from any o f you 🙂

Try adding this line to prevent the repeat:

background-repeat: no-repeat;