Adding Images on Top of Squarespace Banners

Isaac Summers
·
5
min read

Use Custom CSS to add logos, badges, and other images on top of banners.

Preface

If you ask anyone from Nashville what their favorite restaurants are in the city, it is almost inevitable that one of M Street’s concepts will appear in that list. Not only is the food incredible, but the physical design of the concepts are impeccable. Therefore, when we were tasked at re-designing their new website on Squarespace at DesignLive, we decided early on that we were going to push the templates to the very edges of their functionality.

In this post, we will show you one of the customizations that we provided for M Street, and how they can still maintain it on their own.

Description

By turning a page into a banner section (adding an image to the background of it) it allows code blocks, image blocks, text blocks, and many more added on top of it. This increased flexibility can add that extra wow factor into your site.

In this instance, the banner images on the concept pages have added to the site using code. The reason they have been added this way is to enable the logo and accolades on top. By doing this, it still acts as a page instead of a banner section, and we have full functionality to add spacer blocks, text, and images. Normally, only plain text is allowed on the banner images. In order to change the banner image to a new picture, it takes a few steps explained in the directions below.

Requirements for replacement image

These are important to keep the web page at optimal loading and working speed.

  • Image must be less than or equal to 1500px width.
  • Image must be close to or under 300kb file size.
  • Preferably some knowledge of CSS (Not Necessarily Required).

Directions

Step 1

First we need to navigate to the “Custom CSS” area of our Squarespace site. This can be done by clicking “Design” on the Navigation Pane to the left, and then choosing “Custom CSS”. Be careful in this area as this is where most of the code is placed to style the website into the creation it is today.

Step 2

Next, we will add the image to the custom files section of your website. We will do this by opening the “Custom CSS” in a new window and then clicking “Manage Custom Files” at the bottom.

Then, we will scroll down on the right side of the CSS Editor window to the very bottom of the custom file list.

Step 3

At the bottom, we can drag a file or click into the grey area under the list.

This will look something like this. Take note of the file size and dimensions of the image dragged into the grey area. These need to be kept within the requirements so that it does not make a negative impact on page loading speed.

After dragging the file into the custom files section we will should see the file in the list upon a successful upload.

Step 4

With the “Custom CSS” window still open, navigate to line 19. Here you will see this text:

//CONCEPT LOGO BANNER BACKGROUNDS

This is a comment showing where the banner backgrounds have been coded in.

Step 5

The next step is to find the block of code relating to the banner image that needs changing. In this case we are looking for Saint Anejo. As you can see in the picture below the section for Saint Anejo is in a block of code that starts with:

[data-url-id=”logo-saint-anejo”]

Step 6

This is the code block that we want to focus on to change the specific background of each individual concept. The highlighted url below is the old image so we need to highlight and delete this part in the code block. This is the only part that should be changed as all else needs to be left the same.

Step 7

Make sure the cursor is in between the two brackets in “url()”. It should end up looking something like this.

Step 8

To add the new image it takes one more step. Double check to make sure your cursor is placed in the correct place and then click on the new background file you uploaded in the list to the right. Make sure to hit save on the bottom right after doing so.

If all went correctly the code block should look close to what it looked like at the start. Your new banner image will be on the concept page.

If you are unable to save the “CSS Code” and there is red text at the bottom it means there has been an error in the code. The recommended course of action is to close out of the window discarding changes, re-opening the “CSS Code” and starting from Step 5. The file does not need to be re-uploaded into the custom files.

You now have your new banner image in place!

Check out how it looks on M Street’s site!

Lead generation on autopilot

Get more exposure for your freelance or agency services

Knock out your next project

Find the perfect Squarespace designer for your unique needs