Grey space below hero image

  • Hi there,

    Admittedly I’m new to WordPress design, but I pored through the various CSS elements and can’t find where I can fix/address this. On this site I’m working on (click here to open), there’s an annoying grey area below the image when scrolled at specific zoom levels/default resolutions. A screenshot where I circled it is below:

    Grey box

    I’ve tried uploading different cropped versions and larger version of the image — no dice. I’ve tried many different areas of code and it seems the only real “fix” is to remove the position as being “relative” and make it absolute (but then the hero image has no scrolling effect).



    The issue is cause by the dimensions of the background image for the Welcome section and the padding settings you have set for that section as well.

    You can also adjust the background display settings to adjust that.

    I would recommend using an image which is larger in height and maybe reducing the section padding in the Welcome section settings.

    Let me know if you have any trouble.

    Hi Hans,

    Appreciate the response — I rescaled the image from a 3840×2160 image to a 5200×5291 image to test and I still saw the grey boxes.

    I changed the Stylesheet.css under the /* Hero (Welcome) section where the .hero { code begins from:

    padding: 210px 0 170px;


    padding: 0px 0 0px;

    to test and I still see the grey box. Am I missing something?


    It is possibly the clients section?

    That has a greyish background.

    Try disabling it to see if that is the issue.

    Also, you can edit the Welcome section padding in the settings. You don’t need to use CSS code.

    In Integral Options > Welcome section see at the bottom there is a setting for padding.

You must be logged in to reply to this topic.