Overlay to the background images used for the page titles - Forum | JoomShaper
Solved Templates

Overlay to the background images used for the page titles

Asked by esf 1 year ago Last activity 11 months ago

Hello,
Is it possible to add an overlay to the background images used for the page titles?
Template: Mednic.

Thank you in advance.
Best regards,
ESF

Accepted answer

Marked as the solution
Ziaul Kabir Staff
1 year ago

Hello esf,

Thanks for reaching out to us.

Please, use this css in your custom code -> css sections, to add css, you can follow this guide: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

.view-page .sp-page-title {
    position: relative;
}
.view-page .sp-page-title:after {
    content: '';
        position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.20);
}

Thanks

3 more replies

Oldest first Newest first Most helpful
esf Asked this
1 year ago

Hi,
Thank you for you reply.
To make the title appear above the overlay, I adjusted this code — it works :

.view-page .sp-page-title::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.view-page .sp-page-title, .view-page .sp-page-title .container {
position: relative;
z-index: 2;
}

Best regards.
ESF

Ziaul Kabir Staff
1 year ago

You are most welcome.

clausjepsen
11 months ago

Could you make a guide to make the same background effect in Helix as used in Mednic? ie. background image covering both menu header and title/slider area

Ziaul Kabir Staff
11 months ago

Please share the URL of your website page. I’ll apply the changes and share the details with you.

Thanks.

Log in to reply.