Text Overlay for Collections Banner

[hsakag]

Hello,

My site redesign is not yet live so I am unable to provide a URL but I hope someone can help me out. My theme (Envy by WeTheme) allows me to display my collection title on my collections pages but it appears below my collections banner. How can I edit the code below so that the "collection.title" appears as a centered text overlay over the "collection.image" instead? Thank you in advance!

{% if section.settings.collection_image_enable %}
	<style>
	#main-navigation-wrapper{
		margin-bottom: 0px;
	}
	</style>

	{% if collection.image %}
		<div class="collection-image-wrapper">
			{% render 'responsive-image' with collection.image, alt: collection.image.alt %}
		</div>
	{% endif %}
{% endif %}

<div class="container" data-wetheme-section-type="template--collection" data-wetheme-section-id="{{ section.id }}">

  {%- assign limit = section.settings.grid | times: section.settings.rows -%}
  {% paginate collection.products by limit %}

  <div data-section-id="{{ section.id }}" data-section-type="collection-template">

    <div id="collections-main" class="{{ collection.handle }}">
      <div class="title-bar custom-font collection-header{% if collection.image and section.settings.collection_image_enable %} collection-header--with-image{% endif %}">
        {% if collection.handle == 'all' %}
            <h2>{{ 'products.general.products_title' | t }}</h2>
        {% else %}
            <h2>{{ collection.title }}</h2>
        {% endif %}
        <div class="clear"></div>
      </div>

.

[KetanKumar]

@hsakag 

sorry for that issue but how can i guide with our check url possible to share preview url 

[hsakag]

Thank you for your response! Not sure if you'll be able to see this as my
site is not yet live but here is the preview URL:
https://ingredients-ldn.myshopify.com/admin/themes/120223629361/editor?previewPath=%2Fcollections%2F...