Image Overlay
clements radenborg
Hi, I use Joomla 4.0.3 and Page Builder Pro 3.7.15. I am trying to configure the Image Overlay add-on but I am a bit stuck. I can't find it in the documentation either.
What I have is an image with an overlay of a title and s subtitle, so far so good. But on smaller screens, the image is cut off on the right side. I would like it to cut of on the left side. I hope that I make my intentions clear. The website is still under construction but with uder account demo and password demo, you can log in and see what I mean. https://clements.nl
Thanks in advance,
Clements
Rashida Rahman
Accepted AnswerHello,
Sorry for the delayed response.
The image is working as a background image, and it will not be visible in fullwidth with all device resolutions.
But there is some property values may help to get the view better. So you can try this code in your custom CSS:
.overlay-background-image {
background-repeat: no-repeat!important;
background-position: 50% 50%!important;
background-size: cover!important;
background-attachment: inherit!important;
}Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Best Regards
Rashida Rahman
Accepted AnswerHi there!
Thanks for contacting us.
Can I have a screenshot, kindly?
Best Regards
clements radenborg
Accepted AnswerPicture 1 is full screen www.clements.nl/images/library/1.png
picture two is on a smaller screen www.clements.nl/images/library/2.png
What I would like is that my picture stays on the screen and the left side of the image is cut off.
clements radenborg
Accepted AnswerHi Rashida,
I did enter the custom code and it didn't work. However, once I changed background-position: 50% 50%!important; in
background-position: 100% 50%!important; it does work. Thank you!!
Clements