topic Re: Need help to create overlay for a hero in CMS Development

Need help to create overlay for a hero

Alexandra — Wed, 15 Nov 2017 17:13:41 GMT

Hi,

I am very new to Hubspot and I need to create an overlay effect so I can have my header image with some text and a form on the top.

For that I need to create an overlay, however the only thing I see in the left bar is a rectangle named "flexible colum". Could you please explain me step by step, how to create that ?

Thank you,

Alexandra

Re: Need help to create overlay for a hero

TRooInbound — Thu, 16 Nov 2017 05:54:44 GMT

Hi @Alexandra,

Welcome to HubSpot!

We will suggest you follow simple steps to create an overlay effect,

this is code, you have to just replace with your hero banner class name and related RGB Color code.

.hero-banner {
    position: relative;
    z-index: 1;
}

.hero-banner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(17,17,17,0.7);
    height: 100%;
    z-index: -1;
}

Note: you can find Color RGBA Code from here

Hope this work

TRooInbound Team!

Re: Need help to create overlay for a hero

Jsum — Thu, 16 Nov 2017 08:05:53 GMT

@Alexandra,

I think what you are wanting to do is have a section with some content and a form, and you would like an image behind this section as a background image?

You don't need to do any complication stuff, to do this. You just need to apply a background image to that section which you can do using the inline css in the css options for the wrapper containing your form and content. add:

background: url(image.png) center center no-repeat; background-size: cover;

in the inline css for the wrapper, where image.png is the url of your background image.

If you want it to be editable you can use a HubL image module in place of the static image url, just make sure you use single quotes in the module snippet because the template will generate double quotes around the css when the template is processed.

Re: Need help to create overlay for a hero

Alexandra — Thu, 16 Nov 2017 10:46:19 GMT

Thank you so much for your help !