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!:)
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.
Hi @Ksenia_M See the attached screenshot. You would add the following:
background-image: url("US Banner.jpeg");
to theCustom 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
Did my post help answer your query? Help the Community by marking it as a 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.
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.
Hi @Ksenia_M See the attached screenshot. You would add the following:
background-image: url("US Banner.jpeg");
to theCustom 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
Did my post help answer your query? Help the Community by marking it as a solution