Hi,
Im trying to recreate this landing page in HubSpot.
https://explore.sygnaturediscovery.com/invivo/
I have managed to do 90% of the work but I’m at a loss when it comes to adding the header image. I simply can’t reproduce the functionality.
Does anyone have any suggestions on how I can achieve it with examples? I’m really struggling.
This is the page I have created.
Hello @JHardy43
Thanks for reaching out. Good question, but you can create the custom module ‘Hero Banner’. It can good option for parallax image.
Thanks
Hi @JHardy43,
Do you have any experience with html and css? Otherwise I suggest to get in touch with a developer.
The option what you want is just adding a background image and set it to background-attachement: fixed.
CSS for it will look like this:
.section{
/* Setting the background image */
background: no-repeat center center url('image.jpg');
/* Setting the background image to fixed */
background-attachment: fixed;
}
A working example can be seen at this codepen.
That’s amazing thank you! How do I make it so that the image spans the whole area? The width seems to be controlled by the height. The image boundary also seems to move on scroll.
https://info.sygnaturediscovery.com/google-ads-test?hs_preview=qafLEjDn-109493823764
Hi @JHardy43,
Your template has 2 rows. The first is empty, the other has all content in it. For this way it’s not possible to achieve your goal.
So bring your header to the first row and add the following css will do the trick.
.row-fluid-wrapper.row-depth-1.row-number-1 {
background: no-repeat center center url(https://info.sygnaturediscovery.com/hubfs/GA%20BG%20OL.jpg);
background-size: cover;
background-attachment: fixed;
}
I may have sorted the width now thanks to your help! I don’t suppose you know how to add a colour overlay to the image as well? I’ve tried stackoverflow but the options don’t seem to be working.
.main-content{
/* Setting the background image */
background: no-repeat center center url(“https://7062255.fs1.hubspotusercontent-na1.net/hubfs/7062255/GA%20BG.jpg”);
background-size: cover;
/* Setting the background image to fixed */
background-attachment: fixed;
}
