Home Background Image is cut off on live website?

Michelle Wavrick June 24, 2021 at 2:30 am

When I upload my background image in WordPress, the preview looks perfect. However, when I publish the changes and go to the live site, the background image is blown up slightly larger than in the preview, and therefore cut off on the bottom so I can’t see the whole image? Do I need to make it a specific size?

Replies (4)

  1. Michelle Wavrick June 24, 2021 at 2:30 am

    When I upload my background image in WordPress, the preview looks perfect. However, when I publish the changes and go to the live site, the background image is blown up slightly larger than in the preview, and therefore cut off on the bottom so I can’t see the whole image? Do I need to make it a specific size?

  2. Spiracle Themes June 24, 2021 at 12:12 pm

    Hi Michelle

    The reason for this is the change in width of the screen and the image adjusts itself according to the screen width size. In customizer preview
    the width of the site is small as compared to the live website.

    What is the solution?

    1) If you have any other image of yours you can try.
    2) Try the image below. We cropped the image from the bottom
    View Image
    3) Make your header transparent which gives you an extra view of your image. Go to Appearance -> Customize -> Header Styles and
    change the header style.

    Let us know if this works out for you

    Best Regards

  3. Michelle Wavrick July 2, 2021 at 10:29 pm

    This did seem to work, I just need to adjust the text so it’s not cut off. Thank you!

    Additionally, how can I adjust the size of the font in the subheading text on the main homepage? The paragraph below “Let yourself happen?” I want it to be larger but I can’t seem to find the right place to adjust. None of the heading font settings change it.

    Thank you.

  4. Spiracle Themes July 4, 2021 at 4:23 am

    Hi Michelle

    This simple CSS will do this

    .slide-bg-section p {
       font-size: 17px;
       font-weight: 500;
    }

    Copy & Paste it in Appearance -> Customize -> Additional CSS

    Note: You can also increase/decrease the number 17 to adjust it.

    Best Regards

  5. Michelle Wavrick July 6, 2021 at 4:52 pm

    PERFECT! This worked exactly how I had hoped. Many thanks.

Post a Reply

Reply To: Reply #2451 in Home Background Image is cut off on live website?
Your information:




Cancel