Hello,
My website background image isn’t being responsive for smaller devices. When my website is viewed the background image is cut off. What custom css can I use to make it work properly?
Hi Louis,
Try the CSS below
#parallax-bg #slider-inner{
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
Copy and paste it in Appearance -> Customize -> Additonal CSS
Best Regards
Thank you,
in some cases the image is still clipped. Would i have to change the resolution of the image itself? But the CSS did work
Hi Louis,
Try changing the resolution and let us know
Best Regards
Hello,
I tried changing the resolution but all it did was pixelate the image. It works fine when I resize my browser reducing the width, but when I reduce the screen size horizontally, it zooms into the centre of the image instead of scaling the image to fit the container.
Thank you
Hi Louis,
Try disabling the parallax scroll option from Appearance -> Customize -> General Settings and then check
Best Regards
work perfectly now! Thank you!