Space around header image when resizing

When I resize the browser window to ‘small’ or view on mobile there is white-space above and under header image. See screenshots. How do I remove the spaces above above and between Menu and Header?

BTW, I moved the menu beneath the Header Image (in child theme)
And this is the additional CSS I added (in the UI):

     .header-image.parallax {
            background-size: contain;
      }
    .header-image::after { 
            display: none; 
     } 

Help would be appreciated.

Hello there,

Thank you for contacting us about our theme Rocket. I am happy to help out.

I need direct checking to find the problem and suggest the correct solution. So I request you sharing the link to your page in your reply to this response.

Regards,
Kharis
aThemes Support

sportakkoordstichtsevecht. nl

Thank you for taking a look.
Reminder: In header.php the Menu-DIV is moved under the header-image.

Hello there,

Thank you for sharing your website URL.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #page .header-image,
    #page .header-image.parallax {
      background-size: cover !impportant;
      background-position: center center !important;
      background-attachment: scroll !important;
    }

Regards,
Kharis
aThemes Support

Too bad. It doesn’t solve the problem. The more important people are all on the edges of the image. Therefore, I need the full width to be visible at all times.

  • So, the width is appropriately adjusted with “background-size: contain;” (on mobile phones and when the browser window is not full screen).
  • But the height of “the area above the menu” should scale with the height of the image to prevent white bars above and under the image.
    Could you advise on that problem?

Hello there,

Thank you for updating me.

The code solution above is aimed to make the image looks bigger as it sets as a cover.

Do you notice tha responsive image on smaller screen be down resized, which means the image will goes smaller?

I think if we retain small image, we’ll loose the text over it.

Regards,
Kharis
aThemes Support