Background image appears zoomed in

  • Resolved schmidtjd

    (@schmidtjd)


    7 years, 11 months ago

    https://www.thewelldesmoines.com/

    Background image is not sizing appropriately. In the customizer, under Additional CSS, I have the following code:

    body.custom-background {
    background-size: cover !important;
}

    FWIW, I also put this code into Advanced CSS Editor after reading another similar thread.

    This code worked when I initially built the site, but it recently stopped working. How do I get my background image to display at the appropriate size? Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi,
    You can try this code:-

    body.custom-background {
    background-size: 100% 100% !important;
}

    Thanks
    Mohammad

    Thread Starter schmidtjd

    (@schmidtjd)

    I disabled the Advanced CSS Editor plugin and added the suggested code to the WordPress Customizer > Additional CSS. However, the background image still looks the same. Other ideas?

    Hi,
    Try this code also:-

    body.custom-background {
    background-size: 100% 70% !important;
    background-position: right bottom !important;
}

    Thanks
    Mohammad

    Thread Starter schmidtjd

    (@schmidtjd)

    I’ve tweaked the code a bit, but it’s worked nicely on laptops and mobile devices. However, the bottom of the image is still buried on desktops, which I don’t understand. Any ideas how to fix it on desktops? Also, is there a way to set specific CSS for different devices? I think Advanced CSS Editor works but didn’t know if there’s a better option. Thanks.

    Hi,
    Please share the screenshot of desktop issue. Just marked the issue and share with https://droplr.com/.
    Thanks
    Mohammad

    Thread Starter schmidtjd

    (@schmidtjd)

    On desktop: https://d.pr/VG7Q
    On laptop: https://d.pr/twMM

    • This reply was modified 7 years, 11 months ago by schmidtjd.

    Hi,

    I would suggest you use 2048×1365px size of the image for background. So it will show uniform on all devices.

    body.custom-background {
    background-size: 100% 70% !important;
    background-position: right bottom !important;
    }

    THIS! It worked for me Thank you so much!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Background image appears zoomed in’ is closed to new replies.