Two banners/background images on a website page

SOLVE
Highlighted
New Contributor

Hi All,

 

I would like to have two full-width images on a website page, so that one of them is the header background image and the other one is a background behind a video. 

 

I know how to add a header image, however when I'm trying to add a video background image it just replicates the header image, see here: https://www.kineticsoftware.com/client-success-team?hs_preview=kISlehFd-5730574789. Any idea how I could make the second image different from the header? I tried to just add a different image in the module directly, it didn't work. Help please!:) 

 

Thanks in advance!

Ksenia

 

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Solution
HubSpot Employee

Hi @Ksenia_M  You won't be able to stack images using modules on your template. You will instead need to use the CSS background property to set the background for the specific element. This will require some knowledge of CSS, but a good explanation of how to apply a backgound image can be found here

 

You can also use the Group feature in the design manager to group togther modules and add a custom inline styling (the background image mentioned above) for that specific group.  

 

Please let me know if you have further questions.

 

Thank you,

Ed Justen

 

 

    


Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Reply
0 Upvotes
Highlighted
Solution
HubSpot Employee

Hi @Ksenia_M See the attached screenshot. You would add the following:

 

background-image: url("US Banner.jpeg");

 

to the Custom Inline Styling block for the group module. Keep in mind though, the image needs to be linked, so it must be hosted somewhere, and the link to the image must be part of the css code used in the inline styling block. See attached screenshot. 

 

Thank you,

Ed Justen

 

declaration.png


Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Reply
0 Upvotes
3 Replies 3
Highlighted
Solution
HubSpot Employee

Hi @Ksenia_M  You won't be able to stack images using modules on your template. You will instead need to use the CSS background property to set the background for the specific element. This will require some knowledge of CSS, but a good explanation of how to apply a backgound image can be found here

 

You can also use the Group feature in the design manager to group togther modules and add a custom inline styling (the background image mentioned above) for that specific group.  

 

Please let me know if you have further questions.

 

Thank you,

Ed Justen

 

 

    


Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Reply
0 Upvotes
Highlighted
New Contributor

Hi Ed, 

 

That is helpful, thank you. If I'd like to add the CSS code, for example this one:

body {
background-image: url("US Banner.jpeg");
}

Would I need to add this to the image module itself, the group module or somewhere else? Tried to add this code to both image and group modules in the Custom Wrapping HTML but it didn't work... 

 

I managed to add a form-background but the rich text has moved to underneath the image instead of being 'in front' of the image. 

 

Thanks a lot

Ksenia

Reply
0 Upvotes
Highlighted
Solution
HubSpot Employee

Hi @Ksenia_M See the attached screenshot. You would add the following:

 

background-image: url("US Banner.jpeg");

 

to the Custom Inline Styling block for the group module. Keep in mind though, the image needs to be linked, so it must be hosted somewhere, and the link to the image must be part of the css code used in the inline styling block. See attached screenshot. 

 

Thank you,

Ed Justen

 

declaration.png


Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Reply
0 Upvotes