Jump to content

Align background image to the top of an image rather than the bottom.

Go to solution Solved by Ziggy,

Recommended Posts

Hello! Is there a way to force the background image to align to the top of the image in full-bleed mode rather than the bottom? The focal point tool allows me to move the image horizontally but not vertically. Any time I use an image with people the faces get cut off with the default alignment. Thank you so much for your help!

Screenshot 2023-05-02 at 2.47.54 PM.jpg

Link to comment

The background of the first section will always extend to fill the space behind the navigation bar so that if the navigation is transparent then there will be background behind it as well. It's generally best practice with background images to make sure there is a reasonable amount of negative space around any subject as background images always crop to fit the space behind the content. Do you have a version of the banner image that has more head-room? 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ahh. That makes sense. Thanks, Ziggy. Using that I found a workaround by adding a section above the image, shrinking it as small as possible and color matching to the top navigation. It makes the top most section a little bigger, which is not ideal, but not a dealbreaker. I tried using this custom CSS to shrink it further but couldn't get it to work:

[data-section-id="abcxyz"] {
	min-height: unset !important;
	height: 50px !important;
}

Thanks again for your insight. 

Screenshot 2023-05-03 at 2.18.08 PM.jpg

Link to comment
  • Solution
10 hours ago, CCMH said:

I tried using this custom CSS to shrink it further but couldn't get it to work:

[data-section-id="abcxyz"] {
	min-height: unset !important;
	height: 50px !important;
}

Not sure that code would work for you, try this instead:

section[data-section-id="64529e2a34a204119a4fdd17"] {
  max-height:1px !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You are a genius. That totally worked. Thank you! For anyone else with this issue, get the Squarespace ID Finder extension for your browser to easily get the data-section-id. Also, it worked great when I added it to Custom CSS under Design, but did not work when I added it to Pages --> Page Settings --> Advanced. 

 

Thanks again!

Link to comment
9 hours ago, CCMH said:

You are a genius. That totally worked.

Fantastic!

9 hours ago, CCMH said:

Also, it worked great when I added it to Custom CSS under Design, but did not work when I added it to Pages --> Page Settings --> Advanced. 

The code injection areas require HTML not CSS, though you can specify that the HTML you are adding is CSS with these opening and closing tags <style></style>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.