Remove additional space below banner image on different screen sizes

Hi there, 

I have uploaded a banner header image to my website, I have added text and logo placements on this on the image, not as additional blocks on squarespace so I can control the sizing and placement better. However, at different screen sizes, the banner image creates an additional block below the image that I don't want there. 

Ideally it never expands bigger than the image I have uploaded, and the image remains the same. Is this possible with custom CSS? 

Here are some images of the view when it works with no additional spacing: 

And then images for on mobile view, and a smaller screen size, both which have the additional spacing I want to remove. 

I have tried to play around with the banner width and placement, but in every outcome at a certain screen size this space appears. Ideally I want to create a rule that stops this from happening. 

Any help much appreciated! 

Thanks, 

Heather 

You are seeing space under the banner because there is blank space baked into the actual image which shows up when the full extent of the image is used on narrower screens. Background images will always be cropped to some extent. You can control them by coding the section height to be a ratio of the width, but this will impact any content on the section. Having fewer rows may help, but you've probably done that to control the position of the text block.

https://images.squarespace-cdn.com/content/v1/65c51399a2fd6910bfd167e0/5de21f81-e7d5-46be-b488-f762cc698a50/natalia-blauth-DMIxbXYaHac-unsplash.png