Author Posts

[Louis Abasta]

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?

[Spiracle Themes]

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

[Louis Abasta]

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

[Spiracle Themes]

Hi Louis,

Try changing the resolution and let us know

Best Regards

[Louis Abasta]

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

[Spiracle Themes]

Hi Louis,

Try disabling the parallax scroll option from Appearance -> Customize -> General Settings and then check

Best Regards

[Louis Abasta]

work perfectly now! Thank you!

[Author]

Posts