thaitandem

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread.  
  1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.) 2) Set Section Height to minimum-10. 3) Delete the default background image.  4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below.  5) Delete the spacer that may show up in the center of the section.  6) Obtain this new Section’s section-id and its empty Text block-id.  7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above.    <style> [data-section-id=“XXXXX"] {     min-height: 1vh !important; } [data-section-id=“XXXXX"] .content-wrapper {     padding-top: 0px !important;     padding-bottom: 0px !important;     background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/ } #block-XXXXX {   padding: 0px !important;   font-size: 1px !important; } </style>  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

Got a quick response back from Squarespace...
Hi there, 

Greetings from Portland, Oregon. Thanks for writing in to Squarespace Customer Support! 

I've gone ahead and read through for article you linked as well as checked out your site and I can see what you mean. At this point in time the behavior that you're seeing is expected and we mention that a header with a solid background color will cover some of your image here:

https://support.squarespace.com/hc/en-us/articles/360000667707#toc-header-background

In the meantime what I can do is submit the option to not have the header overlap some of the image as a feature request to our Development Team for you. We can't guarantee that each suggestion will be implemented, but each one is reviewed by the team and we do appreciate the feedback.

Moving on, if you don't want to have your solid background header overlap your first image you might consider using custom code to resolve this. That being said, be aware that due to their complex nature, we're unable to offer assistance or troubleshooting for code modifications or additions. These types of modifications may cause unwanted results when interacting with our platform, templates, or updates we release. This guide is an excellent starting point: 

https://support.squarespace.com/hc/en-us/articles/205815928

If you're looking for an option that won't require code, I'd recommend giving the work around that NovaMae mentioned which includes adding a blank section with no content above you full bleed image and setting it to the lowest height possible. From there you can add a background color that matches your header and that can help push that content down so it's revealed in full.  

I hope this information helps!

Cheers,
Katherine S.

I've got the same problem using 7.1. Even trying a brand new site demonstrated this behavior.  I'm using CSS to add a top margin to that Section ID to account for the space absorbed by the header. A far from perfect hack as different screen resolutions render the height of the header differently, so need to target them specifically. Those in the know must have far more elegant solutions to offer, to what must be a known problem within Squarespace? 

Got a quick response back from Squarespace...
Hi there, 

Greetings from Portland, Oregon. Thanks for writing in to Squarespace Customer Support! 

I've gone ahead and read through for article you linked as well as checked out your site and I can see what you mean. At this point in time the behavior that you're seeing is expected and we mention that a header with a solid background color will cover some of your image here:

https://support.squarespace.com/hc/en-us/articles/360000667707#toc-header-background

In the meantime what I can do is submit the option to not have the header overlap some of the image as a feature request to our Development Team for you. We can't guarantee that each suggestion will be implemented, but each one is reviewed by the team and we do appreciate the feedback.

Moving on, if you don't want to have your solid background header overlap your first image you might consider using custom code to resolve this. That being said, be aware that due to their complex nature, we're unable to offer assistance or troubleshooting for code modifications or additions. These types of modifications may cause unwanted results when interacting with our platform, templates, or updates we release. This guide is an excellent starting point: 

https://support.squarespace.com/hc/en-us/articles/205815928

If you're looking for an option that won't require code, I'd recommend giving the work around that NovaMae mentioned which includes adding a blank section with no content above you full bleed image and setting it to the lowest height possible. From there you can add a background color that matches your header and that can help push that content down so it's revealed in full.  

I hope this information helps!

Cheers,
Katherine S.

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

A much simpler version of the above is now delivering consistent results for me. Maybe it will work for  others? 
1) Add new Blank Section between Header and Image Section. 
2) Set this new Section's Height to its lowest value: 10. 
3) Capture Section ID. 
4) Insert the code below with the Section ID into the page's Advanced Code Injection. 
[data-section-id="Your Section ID"]>.content-wrapper { height: 0 !important; padding: 0 !important; }  

Got a quick response back from Squarespace...
Hi there, 

Greetings from Portland, Oregon. Thanks for writing in to Squarespace Customer Support! 

I've gone ahead and read through for article you linked as well as checked out your site and I can see what you mean. At this point in time the behavior that you're seeing is expected and we mention that a header with a solid background color will cover some of your image here:

https://support.squarespace.com/hc/en-us/articles/360000667707#toc-header-background

In the meantime what I can do is submit the option to not have the header overlap some of the image as a feature request to our Development Team for you. We can't guarantee that each suggestion will be implemented, but each one is reviewed by the team and we do appreciate the feedback.

Moving on, if you don't want to have your solid background header overlap your first image you might consider using custom code to resolve this. That being said, be aware that due to their complex nature, we're unable to offer assistance or troubleshooting for code modifications or additions. These types of modifications may cause unwanted results when interacting with our platform, templates, or updates we release. This guide is an excellent starting point: 

https://support.squarespace.com/hc/en-us/articles/205815928

If you're looking for an option that won't require code, I'd recommend giving the work around that NovaMae mentioned which includes adding a blank section with no content above you full bleed image and setting it to the lowest height possible. From there you can add a background color that matches your header and that can help push that content down so it's revealed in full.  

I hope this information helps!

Cheers,
Katherine S.

In case it may be of use to others, here is what I, a novice, is now doing to remedy the problem—gaining the full height of the image below the Header, with no extra space between the Header and Image Section below. It’s a modification of Zara’s approach with some modified CSS @tuanphan offered from another thread.  
  1) Place a new Image Section between the Header and current Image Section. (I’ve tried with a Blank Section, but did not achieve consistent results—for some reason the Image Section worked every time.) 2) Set Section Height to minimum-10. 3) Delete the default background image.  4) Set background color of the new Image Section to match the background of the Header — or use CSS as indicated below.  5) Delete the spacer that may show up in the center of the section.  6) Obtain this new Section’s section-id and its empty Text block-id.  7) Inject the following CSS into the page’s advanced settings, incorporating the appropriate section and block ids from step 7 above.    <style> [data-section-id=“XXXXX"] {     min-height: 1vh !important; } [data-section-id=“XXXXX"] .content-wrapper {     padding-top: 0px !important;     padding-bottom: 0px !important;     background-color: /*your color*/ !important; /*optional to match Header background if not set in step 5 above*/ } #block-XXXXX {   padding: 0px !important;   font-size: 1px !important; } </style>