Jump to content

Stretched banner background images

Recommended Posts

Working on 7.1 in a section with an existing background image, already set to full bleed and with 36% opacity. I want to change the opacity and background colour, as it all looks far too blue. But as soon as I touch the opacity slider in the background tab of the editor, the image is stretched widthwise out of all recognition. I am not confident with coding, and couldn't find any answers to this issue that didn't use coding. Is the best way to delete the background image and start again, or should I be able to edit it? 

Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@EmmanuelOxford That definitely sounds like a bug in the system, though not being able to see what you see, it's hard to know for sure. If it is a bug, a possible work around would be to:

  • Go into your Site Styles and find the Color Theme of the section you have the background image in.
  • Find 'Background Overlay' under the Sitewide section and make it less blue.
  • If it's still not the color you want, you can select HSL and modify the opacity.

Keep in mind that it will change that overlay for all sections with it applied, so if you have that effect elsewhere, they will also be impacted. 

Hope this helps! Let us know if it doesn't work and we'll brainstorm further. 

Here's a sample screenshot of what those settings look like:




Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

Thank you, that is so helpful! I have succeeded in changing the background overlay colour on one of our themes from blue to grey and a reduced saturation, which has improved the colour of banner images. However, if I try to change the theme of a page it also stretches the images, so I've exited those pages without saving. Attached screenshot of original and stretched image. 

Original banner image Talks.png

Banner image Talks stretched.png

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.