Using The Page Title Menu Option And A Linear Gradient
Karen Dunne
In the Page Title tab of a menu item, there's an option to add a background color to overlay the image. See screenshot: https://go.screenpal.com/watch/cOe6oanZxl3
I'd like that to be a linear gradient. But, when I try to add a linear gradient via custom css, it doesn't work because it results in the actual background instead of an overlay. See screenshot: https://go.screenpal.com/watch/cOe6oGnZx2u
I've used a background color before and reduced the percentage to allow for the image to show through, e.g. rgba(0, 0, 0, 0.66). But I'd like to use a gradient instead.
How can I achieve a linear gradient as an overlay to the background image?
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out.
Please try the following sample code in your custom CSS:
.sp-page-title {
position: relative;
overflow: hidden;
}
.sp-page-title::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 100%);
z-index: 1;
}
.sp-page-title .container {
position: relative;
z-index: 2;
}Here is all about custom code placement in the Helix Ultimate framework: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Best regards,
Karen Dunne
Accepted AnswerThis is perfect, just what I needed. Thank you, Rashida. I appreciate it.