Position floating CTA with background image and text

[mkarsten]

The goal is to have a responsive background image with floating text and CTA. I found the code in another ticket to get most the way there, but am having issues getting the CTA to float under the text. It wants to live in the bottom left corner of the image.

I struggled to get the full image to show and be responsive until I used % on text padding. Hope that's not what's throwing it off. I've tried adding padding or margin to the CTA code, but then the button disappears on the page. Any suggestions?

Here's the link to the preview: https://info.pitsco.com/tag?hs_preview=KCwLsvpR-5371714942

[jennysowyrda]

Hi @mkarsten,

Do you mind sharing the resource that helped get you started? If you could also clarify a bit more what you would like the cta/positioning to look like in the end? Do you want it centered in the image? 

The more information, screenshots and details you can provide, the better the Community can assist.

Thanks,
Jenny

[mkarsten]

Thanks for replying. I figured out a fix yesterday. The code isn't necessarily pretty, but it did get the button to left-align directly under the text, where we were wanting it. A styled soft return was my solution. The mobile version has a small issue with line-height on the 3rd line, but I was on a short deadline and will have to revisit later. Adding info below in case it helps anyone else. If you have a better solution that doesn't cause the mobile issue, I'd love to see it.

The now published page: https://info.pitsco.com/tag

Here's the code I used in custom html module:

<div style="background: url({% image_src 'executve_image_src' src='https://cdn2.hubspot.net/hubfs/2781691/Landing%20Page%20Images/TAG/TAG-Summit-brainstorming-no-butto...', no_wrapper=True, max-width: 100%}); center center no-repeat; background-size: cover;">{% widget_block rich_text "image_text" overrideable=True, label='Image Text' %} {% widget_attribute "html" %}
<p style="font-family: 'Roboto Condensed',Verdana,Arial,Helvetica,sans-serif; color: #ffffff; font-size: 5em; font-weight: 900; padding: 15% 0 15% 20%; line-height: 1.25em; text-shadow: #000000 2px 2px 8px;">TEACHER ADVISORY GROUP<br style="line-height: 2em;">{{cta('232b29f7-292e-4796-919c-6acc5b7a99ce','justifyleft')}}</p>
{% end_widget_attribute %} {% end_widget_block %}</div>

It was updated from the code I found in this ticket: https://community.hubspot.com/t5/Content-Design-Questions/placing-CTA-buttons-text-over-image-slider...