Layer form over background image

[AllisonZ]

Hi HubSpot Design Community,

Looking for assistance in layering a form over a background image.

Goal: Layer form over background image in banner of Landing Page

Details: I have tried adding it in on the template level as a field to the HTML + HubL within the banner image module. I was able to add the field but nothing showed on the template level.

I would like it to look something like this:

What would be the best way to achieve this?

Thanks in advance!

Allison

[jieyintan · Accepted solution]

Hi @AllisonZ 

I had a quick look at your custom module, and it looks your code is right. We could probably just be missing a background image. 🙂 

No default image selected in custom moduleYou can select an image here on the Design Previewer/Content Editor too

I noticed in the second screenshot that your <div> height is pretty short because there isn't much content right now. To overcome this, you can consider specifying a min-height for your <div> in your CSS. 

I've set up a simplified custom module on my end as an example:

Configuring the CSS for min-height

How this simplified module looks

Let me know if that works for you! Feel free to reach out directly to me too to troubleshoot this together. 🙂

[AllisonZ]

Hi Jie,

thank you for providing a workable solution! Your suggestion enabled me to layer a form over the background banner image.

Thank you again!

Allison