How to add a watermark to gallery images in Squarespace

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

This tutorial will teach you how to upload your own image that you can use as a watermark over photos in a gallery section.

A quick pro tip! You can install these codes site wide BUT if you only want to see these changes on one individual page on your site, click on the gear icon to access your page 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.

To see a step by step tutorial of how to install code on a single page, check out this post: insidethesquare.co/singlepage

There are quite a few things you’ll need to adjust in this code, so I strongly recommend watching the tutorial video so you can see how it works and what you’ll want to change! The codes and main steps are outlined below.

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. Make sure the name of the gallery matches the type of the gallery you are using; check the list of names below.

5. Adjust the height and width to make your watermark the right size for your site style.

6. Adjust the top/right/bottom/left code names & values to place the watermark in the right spot.

7. Optional: follow steps 2 - 6 for your lightbox image too.

8. Save your work!

Here is the main code from the tutorial:
The parts you might want to change are in bold.

.gallery-grid-item-wrapper{
position: realtive!important}

.gallery-grid-item-wrapper:after{
content: " ";
display: block;
background-image: url(image-url-here)!important;
background-size: contain;
position: absolute;
width: 100px;
height: 100px;
left: .5rem;
bottom: .5rem;
opacity: .5
}

Here are the code names for the different gallery types:

Grid: simple = .gallery-grid-item-wrapper

Grid: strips = .gallery-strips-item-wrapper

Grid: masonry = .gallery-masonry-item-wrapper

Slideshow: simple = .gallery-slideshow-item-wrapper

Slideshow: full = .gallery-fullscreen-slideshow-item-wrapper

Slideshow: reel = .gallery-reel-item-wrapper

Here is the code for the lightbox image:
Be sure to update the values in bold to make it the right size & placement!

.gallery-lightbox-item-wrapper{
position: realtive!important}

.gallery-lightbox-item-wrapper:after{
content: " ";
display: block;
background-image: url(image-url-here)!important;
background-size: contain;
position: absolute;
width: 100px;
height: 100px;
left: .5rem;
bottom: .5rem;
opacity: .5
}