Overlay To The Background Images Used For The Page Titles - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

Overlay To The Background Images Used For The Page Titles

esf

esf

Template 2 weeks 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
3 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 weeks 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
2 weeks 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 2 weeks ago #206065

You are most welcome.

0