Slider images not scaling

<li style="background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat;background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">

Spanky22 i have same code in modality-image-sliders.php but its still not working

Now i put this code and its result is some thing else means not working in that manner.

<li style="background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">

Hi, I have a similar issue in that my image scales ok, but the text on it doesn’t so it doesn’t wrap around but instead just keeps going into the black area at the side. I have had to shorten the text to try and make it fit but that’s not great. Therefore, related to this is the fact that I can’t seem to be able to just show a summary of the post on the image slider, only all text which makes the click through fairly pointless.

Interestingly when I view this on a tablet it is fine. But on a desktop with a larger screen it does what I described above. And on mobile no text comes through other than the heading.

Does anyone know how to fix this?

This is my site.

Thanks

Hello,
How can I make the slider image responsive?

Thank you.

I am having the same issue. I am not using the sliding function, I have just replaced the Slide1 image in Cpanel and added the call to action button and manually linked to my contact link.

My Slide1 background image looks great on desktop and on Android phones which use Chrome, but for some reason on Safari the BG image does not resize on mobile.

I have tried all the fixes in this thread, including adding this, with the space added before background-size:cover;”>

——
NOTE FROM ABOVE, DID NOT WORK FOR ME FOR SAFARI:
“I fixed this by adding background-size:cover; to the style definition on line 27 in functions/modality-image-sliders.php.

From:
<li style=”background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat;”>
To:
<li style=”background: url(<?php echo esc_url($image[0]); ?>) 50% 0 no-repeat; background-size:cover;”>”

—-

My site is https://www.healthlinkfamilychiropractic.com

any help please!

Hi All any progress on this issue?

needing some help asap too!!!

sjapalucci, thanks a lot )

On modality pro 1.05. tried all of those mods and no luck. Setup a child theme to play around with the code and workaround this for now. Really hope this will be fixed soon and included in the next update or someone has a fix they can share. I kept making smaller images to try and get them to fit but it just kept zooming in on them, this one seems like something that should be so simple but is really frustrating.

Here’s a temporary workaround that I’m playing with and rather than change background-size:cover and settings in modality-image-sliders.php which I tried at length, I edited the slider in section 7 of the child style.css.

I added a line in for color to match with the background of the website. Otherwise there was a black background showing up in between each image when they changed since the images didn’t cover the full space.

Then I set the size to contain so the full image would show up and what I’ll do is resize all of my slider images to the exact same size so they look consistent.

background-color: white;
background-size: contain;

/* ------------------------------------------------------------------------- *
 *  7. Image Sliders Styles
/* ------------------------------------------------------------------------- */
.ideal-image-slider {
	position: relative;
	overflow: hidden;
}
.iis-slide {
	display: block;
	bottom: 0;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: white;
	background-size: contain;
	text-indent: -9999px;
}