Zara
-
Posts
2 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Zara
-
-
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?
Thanks!
- Starly, JustinSeimits, laylaann and 1 other
- 4
Problems with image display in first sections 7.1
in Images & Videos
Posted
Here's a link:
https://zarashea.com/nsj9bk8
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!!