Image overlay - Forum | JoomShaper
Solved SP Page Builder

Image overlay

Asked by clements radenborg 5 years ago Last activity 5 years ago

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

Accepted answer

Marked as the solution
Rashida Rahman Staff

Hello,

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

6 more replies

Rashida Rahman Staff

Hi there!

Thanks for contacting us.

Can I have a screenshot, kindly?

Best Regards

clements radenborg Asked this

I'm sorry, can't figure out how to attach a screenshot :-(

clements radenborg Asked this

HIi Rashida, did you have time to check yet?

clements radenborg Asked this
5 years ago · edited

Hi 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

Rashida Rahman Staff

Glad that you have made it:)

And you are always welcome!

Log in to reply.