How can I position an image on top of a banner and align it left center?

[antonSanaHerbal]

I am new to shopify and I need to place an image on top of image banner and position it left center

I added a <div> to image-banner.liquid inside Sections (ColonHarmony.png file at the bottom of the below code)

But It is positioned top left outside the banner border and scaled (see below image - left top corner green part is the part of the image).

So how do I position it to be inside the banner frame and normal scale?

<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths,
          fetchpriority: fetch_priority
      }}
      <div class="banner__text-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 2;">
        <h1>Your Heading Here</h1>
        <p>Your additional text here</p>
      </div>
      <img src="{{ 'ColonHarmony.png' | file_url }}" alt="Overlay Image" class="overlay-image" width="100" height="100">

    </div>

[biznazz101]

Unless you are inserting a link, or are going to add something else like a button it would be simplier to just edit the image banner photo by placing the other image over-top then re-uploading it to the store.

Someone else may be able to provide you the code though.

Hope that helps!
@biznazz101