Jump to content

How do I stop a banner image from being zoomed in?

Recommended Posts

Posted

Hey all, the company I work for is ready to launch a new landing page, but I cannot figure out how to get the banner image at the top to not be zoomed in. 

 

Here is how it looks:

cb0350f3-f789-412e-90b7-6c7e3fdcdba7.jpg.63a21fc408bfe8171a6588329867dfb6.jpg

 

Here is how I want it to look (ignore the 'Content' placeholders, just looking at image):

75681e32-399e-42f7-bb91-130df34e7bd5.jpg.e5242d2e0da9a6096fa0b8831da6f410.jpg

 

I have tried to solve this myself, as I am someone who likes to exhaust all options before turning to a forum. I just cannot figure out how to make the banner display the full height of the image. I've tried several different output sizes, I've messed with the focal point....nada.

 

Any help is appreciated!

  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

One possible reason for it zooming in is because the text and the button are forcing the height of the section to increase. 

When that happens, in order to keep the background image covering the whole section, it has to zoom in, otherwise there would be a gap above or below the image. 

You can try turning off "Fill Screen" in the section settings; this essentially removes the padding at the top and bottom of the section and gives you a bit more room to play with. 

It might also be worth trying to remove the background image and add it as an image block instead, as you'll have more control over the size and positioning, especially on mobile. You can still set an overlay colour on the image to give enough contrast to the text. 

If you need any additional help with this, please share the URL for the page, and the password if there is one.

Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee 

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.