Overlay To The Background Images Used For The Page Titles - Question | JoomShaper
Back to the questions

Overlay To The Background Images Used For The Page Titles

esf

esf

Template 10 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

0
5 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 10 months ago #206026

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

0
esf
esf
Accepted Answer
10 months ago #206062

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

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 10 months ago #206065

You are most welcome.

0
C
clausjepsen
Accepted Answer
9 months ago #207973

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

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 9 months ago #208460

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

Thanks.

0