Element – Text Box (adding text over image)

Hi, I’m have some problems adding text over an image within a text box element. Using HTML code found online seems to cause issues and during one instance deleted all page builder elements. Had to revert to a previous revision.

I added this code to a text box

<div style=”position: relative; background: url(path to image); width: (width)px; height: (height)px;”>
<div style=”position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;”>
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style=”position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;”>
(text to appear at the top right of the image)
</p>
</div>

In doing so, the code worked (although more styling needed) but once I visit the text box again after a page save/refresh the code has vanished and the text box is in its default state. Also for whatever reason ALL page elements were shifted to the left half of page. So I just deleted the text box I created for the image/text and ALL elements on page where deleted except for the slider. Its no stress now as rolled back to a previous version. Perhaps this should be looked into.

1) Do you have a safe solution to add image and text overlay within a text box? Image to be 100% width and text to be aligned to left top.

Thanks in advance