background image not responsive for smaller devices

Louis Abasta April 27, 2019 at 12:09 am

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?

Replies (6)

  1. Louis Abasta April 27, 2019 at 12:09 am

    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?

  2. Spiracle Themes April 29, 2019 at 4:14 am

    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

  3. Louis Abasta April 29, 2019 at 9:57 pm

    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

  4. Spiracle Themes April 30, 2019 at 12:35 am

    Hi Louis,

    Try changing the resolution and let us know

    Best Regards

  5. Louis Abasta May 1, 2019 at 1:36 am

    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

  6. Spiracle Themes May 1, 2019 at 1:31 pm

    Hi Louis,

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

    Best Regards

  7. Louis Abasta May 3, 2019 at 2:01 am

    work perfectly now! Thank you!

Post a Reply

Reply To: background image not responsive for smaller devices
Your information: