Hello, can anyone give me tips on how to create a full-width image (background image) that has a form content module on top of it and a rich text module on top of it. I'm trying to create the attached design.
I am giving you best way to implement full-width background image in HubSpot with the editabiliy feature. it will help you to change background images on every different page which is created or publish from this design template.
no need to go into coding every time once you did this. next time you have to just choose an image from your file manager and replace it.
Using HubL code
this way is more effective and you can change images from page edit level mode.
we prefer this way also.
the same process like above, you have to just create a group of your form and text module and give a class to that created group.
for example, we give the class name 'full-width-bg'
Drag one custom HubL from template editor left sidebar and past below code with your image path,
{% image "background_image_headerFH" label='Select a background image for full width banner',
src='banner.png', no_wrapper=True,
export_to_template_context=True %}
<style>
.full-width-bg{
background:url("{{widget_data.background_image_headerFH.src }}");
background-position: center center;
background-repeat: no-repeat;
background-size: cover; padding:140px 20px;
}
</style>
this will be easy to change from page edit mode in all pages using this templates like,
Nov 24, 20179:08 AM - edited Nov 24, 20179:11 AM
Member
Help with full width image design
SOLVE
Hi Allison!
The simplest way to achieve something like this would be to wrap the form in a group and add some custom styles to that group. If you know the image url, you can add the following styles to the newly created group.
Hey Allison, it's bit difficult to determine what's the main cause of the squishy form. Might be the padding pushing from both sides. If you want I can take a look at it and figure something out (pro bono).
As for the background image size changes – the "background-size: cover" automatically stretches the background image to fill the background and crops the overflowing edges. This makes it bit difficult to adjust the background perfectly (because the aspect ratio of the container changes when making the browser window smaller).
However it's possible to set the origin of the image ("background-position: top center" or "background-position: bottom center" etc).
Hopefully it didn't get too confusing. 🙂 Drop me a line if you need any hands-on help - hi@sellmx.com
Thanks so much yes that worked! However, my rich text box and form are now spread across the background image. Is it best to just use padding to move them to where i want them to be? Also is there any other coding i need to add to make sure it is responsive to mobile?
Yep, looks like the group might also use 3 – 4rem of padding to make it look better. As for the responsiveness – everything should be a-okay, since Hubspot handles the row-to-column switch by itself and the background image doesn't affect anything else.
I am giving you best way to implement full-width background image in HubSpot with the editabiliy feature. it will help you to change background images on every different page which is created or publish from this design template.
no need to go into coding every time once you did this. next time you have to just choose an image from your file manager and replace it.
Using HubL code
this way is more effective and you can change images from page edit level mode.
we prefer this way also.
the same process like above, you have to just create a group of your form and text module and give a class to that created group.
for example, we give the class name 'full-width-bg'
Drag one custom HubL from template editor left sidebar and past below code with your image path,
{% image "background_image_headerFH" label='Select a background image for full width banner',
src='banner.png', no_wrapper=True,
export_to_template_context=True %}
<style>
.full-width-bg{
background:url("{{widget_data.background_image_headerFH.src }}");
background-position: center center;
background-repeat: no-repeat;
background-size: cover; padding:140px 20px;
}
</style>
this will be easy to change from page edit mode in all pages using this templates like,