CMS Development

AllisonAltus
Top Contributor

Help with full width image design

SOLVE

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.

Many thanks!

Allison full width image 2.JPG

1 Accepted solution
TRooInbound
Solution
Key Advisor

Help with full width image design

SOLVE

Hi @AllisonAltus,

 

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, 

 

change_bg_image.gif

 

View solution in original post

9 Replies 9
Sellmx
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.

 

background-image: url('your-image-address.png'); background-size: cover;

 

Here's an example of how to do it in the Design Manager

 

Zcv3AY.gif

 

If you need any personal help, feel free to reach out to me at hi@sellmx.com and I can help you out, no charge.

0 Upvotes
AllisonAltus
Top Contributor

Help with full width image design

SOLVE

Hi @Sellmx, is it possible to change the size of the background cover with your solution? For example i want to make the height of the image smaller?

thank you

Allison 

0 Upvotes
Sellmx
Member

Help with full width image design

SOLVE

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

 

Cheers

0 Upvotes
AllisonAltus
Top Contributor

Help with full width image design

SOLVE

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? 

 

backgroudn imaage.JPG

 

0 Upvotes
Sellmx
Member

Help with full width image design

SOLVE

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.

0 Upvotes
AllisonAltus
Top Contributor

Help with full width image design

SOLVE

hi @Sellmx, thanks for your help with this issue. When i view my form on desktop preview it looks like this:

desk top view1.JPG

But when viewed on mobile preview the form looks like this:

 

mobile view.JPG

Is it the padding that is causing this? Is there anyway to make my blue form box smaller? but without using the padding options? Thanks.

0 Upvotes
TRooInbound
Key Advisor

Help with full width image design

SOLVE

Hi @AllisonAltus,

 

looks like some problem in HubSpot Auto Responsive layout in your Template.

can you please send me URL link so, we can give you a proper solution?

 

Team TRooInbound

 

0 Upvotes
TRooInbound
Solution
Key Advisor

Help with full width image design

SOLVE

Hi @AllisonAltus,

 

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, 

 

change_bg_image.gif

 

Casey1
Participant | Partner
Participant | Partner

Help with full width image design

SOLVE

I am having trouble with this. See the image, I put in Custom HubL module and it shows up on template but not in final preview.Screen Shot 2018-03-22 at 1.06.12 PM.pngScreen Shot 2018-03-22 at 1.07.18 PM.pngScreen Shot 2018-03-22 at 1.07.43 PM.pngScreen Shot 2018-03-22 at 1.08.15 PM.pngScreen Shot 2018-03-22 at 1.08.34 PM.png

0 Upvotes