CMS Development

Alexandra
Participant

Need help to create overlay for a hero

SOLVE

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

0 Upvotes
2 Accepted solutions
TRooInbound
Solution
Key Advisor

Need help to create overlay for a hero

SOLVE

 

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!

View solution in original post

0 Upvotes
Jsum
Solution
Key Advisor

Need help to create overlay for a hero

SOLVE

@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.

View solution in original post

0 Upvotes
3 Replies 3
Jsum
Solution
Key Advisor

Need help to create overlay for a hero

SOLVE

@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.

0 Upvotes
Alexandra
Participant

Need help to create overlay for a hero

SOLVE

Thank you so much for your help !

TRooInbound
Solution
Key Advisor

Need help to create overlay for a hero

SOLVE

 

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!

0 Upvotes