How to add a background image to a blog post in Squarespace 7.1

Nov 16

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

Squarespace blog posts don't have to be so basic! This tutorial will teach you how to upload your own image for blog post backgrounds. You can upload one for every post or even use a specific image for a specific blog.

A quick pro tip! You can install these codes site wide BUT if you only want to see these changes on one individual blog on your site, click on the gear icon to access your blog settings menu, click the advanced option at the bottom of the list, and paste these codes into the page header code injection (third option) between two style brackets like this: <style> code here </style>
If you are using a personal plan or only want to change the background on one individual post, put these codes in between those same style brackets and add it to a code block on that individual post.

There are four basic steps you can take to easily add a background image to individual blog posts in Squarespace The codes used in the tutorial are listed below, and here is what you need to do to make it work on your own site:

Here are the steps:

1. Upload the image to your custom files
2. Paste the code in the description below into your custom CSS
3. Replace the text image-url-here with the URL for the image you just uploaded
4. Save your work!

This is the code that will make the image the background of a blog post:

.blog-item-wrapper {
background-image:url(image-url-here);
background-size: cover
}

And this is the code that will create that slightly transparent background behind all the content so it's easier to read:
Totally option, but if you do use it, definitely play around with the RGBA color code to suit your own site's style!