Jump to content

Issue with "Background Image" being cropped

Recommended Posts

Hi,

page: https://ellipse-teal-dl5w.squarespace.com/contact
pass: 04

I have a issue on my contact page. The background image is a full bleed background. But at certain px width it will crop the bottom moon in the image with a grey bar instead:

Bigger size full bleed looks great:
image.thumb.jpeg.2fedf05491e598ac52ad7584dec7ec0e.jpeg

As soon as we resize the screen, it introduces a grey bar and cuts/crops out the full bleed image effect :
image.thumb.jpeg.d80353b704574409ed878568f595d696.jpeg

on mobile looks great and doesn't crop the bottom part of the bleed, the moon etc:
image.thumb.jpeg.48f0fcef22300f7550aeed3ddde8532c.jpeg

Appreciate all the support given on this space, hope you can help.
Cheers

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try setting the section minimum height to L or 85vh (try adjusting this value)

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

Hi, thanks for your time. Yes I've tried the section height min to L and manual vh. That fixes the issue, but has too much spacing top and bottom design wise.

I'd like to keep the small spacing at full screen and then when the width is smaller like this: 
image.thumb.jpeg.306b3deb3f76a3aa8d44ae44d6233e1d.jpeg

I'd like the spacing to be dynamic and center the contact form like this:a2.thumb.jpg.dc20556d30feaddc4555d48c34a7b2a5.jpg

So some sort of dynamic spacing css code when the window is a certain width?

Cheers

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.