changing mask image in ACM slideshow

jross

Hi, I am wanting to replace the mask image on the ACM slideshow module. I have created a new mask file called mask2018.png and added this code in the custom.css file.
I'm not seeing the change though.
Is this the correct code to use?

.acm-slideshow .owl-carousel .item::before {
background-image: url('../images/mask2018.png');
background-size: 100% 100%;
content: "";
position: absolute;
top: 0;
left: -1px;
right: -1px;
height: 100%;
z-index: 1;
}

Thanks JR

pavit

Hi jross

It is correctly loading as you can see from my screenshot

jross

It must be a cache issue as it doesn't show on my browser. I've tried clearing my browser cache but no effect.
Can you see a rectangular mask behind the main menu at about 50% opacity to highlight the menu items?
How do you force a cache refresh on the web server?
Thanks, JR

jross

Hi, please disregard the last message. I have gone into the cpanel file manager and deleted all the files in the /cache folder. That's bought up the ../mask2018.png image
What I would like to ask is with the slideshow images that are 1600x800px, should the entire image be fully visible in the slideshow? My screen resolution is only 1200px wide, and I am getting 400px width of the image being chopped off.
Is there a way to force the image to resize at 100% of the screen resolution?

aman204

jross What I would like to ask is with the slideshow images that are 1600x800px, should the entire image be fully visible in the slideshow? My screen resolution is only 1200px wide, and I am getting 400px width of the image being chopped off.

Try add this to custom.css file :

.acm-slideshow .owl-carousel .item .bg-item{background-size: contain !important;}

Kindly ensure to clear your browser cache if changes dont reflect

jross

Great, that worked well. The site looks so much better know.
Thanks very much, JR