Adding Captions to your Background Images
Add a caption to your background images that are placed perfectly in the bottom right of your sections.
One feature missing from Squarespace is the ability to add a caption to your beautiful background images. Maybe to credit a photographer, or label the location of the image, or maybe just to add fun little messages around your website.
Of course, you can add a text block anywhere within a section as a caption, but the hard part is positioning it correctly in the far bottom right of your section.
In this tutorial I’m going to show you the code you need to achieve this.
Note
If you want additional caption options, like showing an icon in the bottom right that displays your caption as you hover or click on it, check out our Background Captions Plugin.
Overview
The reason we can put this caption in the bottom right is because the actual HTML of any block we add to our section are contained within the our fluid engine grid. We can’t place blocks outside of this grid.
So, to build this, I’m going to add a caption into a code block in my section. Next, I’m going to write some javascript that is going to grab this caption and move it outside of the fluid engine grid so I can place it anywhere I want.
Let’s get started.
Note
There's lots of ways to achieve similar outcomes with code, but these articles are based on our preferred methods.
1. Adding Your Caption Text
First, I’ll add a code block anywhere on the section with my background image.
I want to give this element a unique class, background-caption, so that I can target this class later with my javascript to move it. I’m going to use the following.
<div class="background-caption">
This is the caption
</div>
Now anything I put within that div will be my caption content.
2. Moving the Caption
Next, I want to move this caption outside of the fluid engine grid so that I can position it however I want with CSS. Here’s some javascript that will do that, I just need to add this to the Website » Website Tools » Code Injection » Site Footer Code Injection area.
<!-- Background Captions Tutorial from Will-Myers.com -->
<script>
function moveBackgroundCaptions() {
let allCaptions = document.querySelectorAll('.background-caption');
for (let caption of allCaptions) {
// Find .content-wrapper so we can place caption within
let section = caption.closest('.page-section')
section.append(caption);
}
}
moveBackgroundCaptions()
</script>
With this code, I’m creating a function called moveBackgroundCaptions and with it I’m targeting all of the elements that I created in the previous step with the class of background-captions. Then I’m looping through them all and moving each caption outside of the grid and appending as the last child element within the section that it’s currently in.
Once I hit save though, the section might look a little odd.
3. Positioning
Two big issues, first the content within the section might be off center, which is visually obnoxious. Second, the caption isn’t showing at all!
The quick reason is the caption has been placed after the content of the page, kinda where the red arrow is above, but underneath the background image, so you can’t see it.
But nothing a little CSS can’t fix! I just need to add this to the Website » Website Tools » Custom CSS area.
.background-caption {
position: absolute;
bottom: 17px;
right: 17px;
}
Note: use the CSS from the Code Section at the bottom of this page, the above is simplified for informational purposes.
Fun Code Fact
Ok, fun code time. When you make an element position: absolute, this takes that element out of the normal flow of the website. Basically no other element respects it’s space (no respect!).
Additionally, when you use absolute, relative, sticky, or fixed as the value for it’s position property, this means the element is now ‘positioned’ on the webpage (the naming here is admittedly confusing).
When an element is ‘positioned’ we can also use the top, left, bottom, and right properties to move it around.
4. Styling
Lastly, I’m going to make the bad Mama Jama look nice.
.background-caption {
font-size: 10px;
font-weight: 500;
color: var(--paragraphMediumColor);
text-transform: uppercase;
letter-spacing: 1px;
background: var(--backgroundOverlayColor);
padding: 2px 10px;
border-radius: 5rem;
}
With this additional styling it should look something similar to this. Your colors might be different though. I’m using the CSS variable that Squarespace uses to match the text and background colors of the section.
Final Code
Use the code below for a production website.
Add this to your Website » Website Tools » Code Injection » Site Footer Code Injection area.
<!-- Background Captions Tutorial from Will-Myers.com -->
<script>
function moveBackgroundCaptions() {
let allCaptions = document.querySelectorAll('.background-caption');
for (let caption of allCaptions) {
// Find .content-wrapper so we can place caption within
let section = caption.closest('.page-section')
section.append(caption);
}
}
moveBackgroundCaptions()
</script>
Add this to your Website » Website Tools » Custom CSS area.
/**
* Background Caption Tutorial
* From Will-Myers.com
**/
.background-caption {
font-size: 10px;
font-weight: 500;
color: var(--paragraphMediumColor);
text-transform: uppercase;
letter-spacing: 1px;
background: var(--backgroundOverlayColor);
padding: 2px 10px;
border-radius: 5rem;
}
body:not(.sqs-edit-mode-active) .background-caption {
position: absolute;
bottom: 17px;
right: 17px;
}
Now whenever you want to add a background caption add the following into a Code Block (or Markdown Block if you’re on a personal plan). Adjust the caption text as you wish.
<div class="background-caption">
This is the caption
</div>
Pro Plugin - Background Captions
If you have an image-heavy website and want some more options for background captions, check out our background captions plugin. The plugin comes with a builder that allows you to easily customize the look and content of the caption as well as some additional options to show the caption when you hover or click on an icon.
