Positioning text overlay on Index Page background banner

Site URL: https://bachcollegiumsd.org/

Hello!
Does anyone know of a means to overlay text on an Index Page background banner (hero)? We've attempted to use a code block in conjunction with the CSS layout position property for both "fixed" and "relative." However, it seems to be a moving target with Squarespace as to where you will see the text lay on the image when in editing mode, preview mode or when viewing the image in a live browser.  Refreshing the browser screen just seems to invoke a signal back to Squarespace to randomly position the text elsewhere on the page with each refresh. It gets even more unusual when viewed on an Apple Retina display for desktop/laptop. 

All feedback welcome.