Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Problems with image display in first sections 7.1

Recommended Posts

I'm really struggling to get an image to display properly in the first section of a page in 7.1.  If I add the image to any section below the first section, it will display properly. 

The first section on each page appears to have a shorter height, I guess because of the site header. But I can't seem to find any combination of image sizing that won't cut off the top of the image when it displays.

I have the section height set at 100%. I've dragged the focus dot up to the very top of the image.  I've resized, cropped, and re-loaded at least a dozen variations of image sizes and nothing is working.

The image is full bleed, so I have it set on the long edge at 2500px, but no matter how much I crop the height, it still cuts off the top and just enlarges the image to fill the space. It's maddening. 

Is there a page header code injection I can use to properly display the image in this section? 

And does anyone know the ideal proportions for full-bleed images in this first section? Or the actual dimensions of this section?


Share this post

Link to post

Following!! I am having the exact same issue here, it is so frustrating. 

The only trick I have found was to add a blank section with no content, and make it the lowest height possible.  I am using a solid colour fixed header though so I was able to make the background that colour and it matches my Header. Basically because there is no content it kind of disappears when I view the site but it means the next section background image fits the section perfectly.  

I would love to know if there is code that I can use to have Full Bleed image align at the top of the actual section and not up underneath the header.

Share this post

Link to post

Here's a link:


In the first section, you can see that the top of the image is cut off. No matter what height I crop this image to, Squarespace cuts off the top when it displays. Currently, this image is 2500x1300px. I've tried cropping it to heights as low as 1000px. Nothing works. It just enlarges the image and cuts off the top!

In the second section is the identical image. It displays properly at the full height. 

In the third section is the image at its original size of 3600x2400px.  This was my first variant when I was going to use a transparent site header (which I had to ditch because the nav wouldn't fit).

This must have something to do with the height restrictions on the first section but I can't figure out through CSS or HTML how to force it to display at full height. Or perhaps there is some magical image size that will work.

Thank you for any help!!

Share this post

Link to post

I've got exactly the same problem and am using NovaMae's workaround (thanks!). There's gotta be a more elegant solution though… Any ideas?

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...