Tips for adding Banner Images In Squarespace 7.1

If you’ve found yourself on this page, there is a good chance you are building your Squarespace website and you are either having trouble with your banner image or you are just trying to figure out how to add a little extra visual pazazz to your site by adding banner images. Either way, I will be covering both in this tutorial with tips on adding banner images in Squarespace 7.1!

First, let’s cover the basics. I remember when I was first learning how to use Squarespace 7.1 and I absolutely could not figure out how to make my banner images NOT BLURRY. It was sooo frustrating. Now I am a pro so I can share my secrets to save you from the same frustration.

There are a few reasons why your banner images might be showing up blurry. Either your image is too small and it’s being stretched, or it is the wrong aspect ratio for the section which is also making it stretch. Both these issues are causing the annoying, stubborn pixelation of your background image. With that being said, it is important to find the sweet spot size for your images.

A good rule of thumb is to make sure your banner images are at least 2,500 px wide.

On the other hand, if you are using images from Unsplash, your image may be crystal clear but watch out! If images are TOO big and you have many of them, they may end up slowing your site down witch is bad for SEO. Instead of uploading background images from Unsplash right in Squarespace, although it’s a really nice feature, try finding and downloading your image on the Unsplash site and resizing it in either Canva or Photoshop.

I repeat 2,500 px wide is the sweet spot.

Now if you have created graphics for your banner images, it is important to also get the correct height so your graphic isn’t getting cut off. This may take some trial and error to find a sweet spot. a great pace to start when creating a canvas might be 2,500px x 1500px.

Once you have your graphic created, make sure to either save it as a PNG or a JPEG. Saving your graphic as a PNG will provide the best quality. You can also use a PNG to save a graphic with a transparent background.

So now that we know the details and the technical part of adding your banner, let’s get to the fun part. Here are some tips and some fun Squarespace features for your Banner images!

To add your banner image in Squarespace, hover over the section and in the upper right-hand corner of the section, click on the pencil icon. once the section editor pops up click on the background tab to change or add your background image.

The first thing is the focal point. You can change the focal point of your banner image to change it’s position and to change the view of your banner image on mobile. To change the focal point, you can click and drag the little circle

When you upload your banner image, you may also see that it is turning out to be an unexpected color, that is because sometimes when you add a new section, there will automatically be a background overlay. you can remove the overlay in the background editor which you will find under the preview window of the banner image. Scale the overlap opacity down to zero to remove that overlay.

A huge bummer about Squarespace 7.1, is that they no longer have the option to add the parallax effect, which is great for adding a dynamic spin on your design. What many don’t know, is that Squarespace 7.1 offers some fun new effects for banner images. I recommend testing them all out there is a a lot of fun things you can do with these effects. I personally love using it as a hack to animate text in the background. However note: don’t include any important information in your background image because it is not good for SEO. Adding any text to the background serve as visual purpose only.

Check out the pan effect in action!

If you liked this toturial, I have plent more to help you build your dream website! Check out my other Squarespace blog posts.

If the overwhelm is setting in and If you are thinking that even with these tips you’ll never be able to pull it off, I get it. It can be overwhelming and it’s okay! That’s what web designers are for. Feel free to check out my services page to see how I might be able to help you while you are kicking a** at building and running your business!