Two banners/background images on a website page

[Ksenia_M]

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

[edjusten · Accepted solution]

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

[edjusten · Accepted solution]

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

[Ksenia_M]

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

[edjusten · Accepted solution]

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