Es una página de destino B2B que he estado desarrollando en un sitio de WordPress. Necesito obtener la sección del héroe exactamente como se muestra en la imagen a continuación.

No pude ir más allá de lo que hace el HTML a continuación. El posicionamiento usando CSS me parece un poco desafiante. ¿Podría echarle un vistazo y ayudarme a agregar CSS para que coincida con la imagen de arriba?

 <div class="corp-hero relative mb-row corp-hero-img relative no-touch select-none"> <div class="texts-and-cta"> <h1 class="mb0 color-tan-dark"> CORPORATE GIFTS </h1> <h2 class="mb0 mt2 alt-heading h4"> Impressive Business Gifts That Create Impact </h2> <div class="shop-gifts-cta"> <a href="https://gifts/collections/corporate?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1636628533586.1636648800123.68&amp;__hssc=198200880.9.1636648800123&amp;__hsfp=530052575" class="btn cta-btn-purple" role="button" target="" title="Shop Gifts"> Shop Gifts </a> </div> </div> <picture> <source media="(max-width: 480px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-640x200.jpg"> <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1024x320.jpg"> <source media="(max-width: 1280px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1500x469.jpg"> <source srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg"> <img src="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg" alt=""> </picture> </div>

Tenga en cuenta que quiero que el texto REGALOS CORPORATIVOS, lorem..elit y el botón Ver regalos se superpongan a la imagen de fondo. A continuación se muestra hasta dónde podría llevarlo con CSS.