I love the announcement bar feature in Squarespace, especially because it’s so easy to change with custom CSS! 🎉 In this tutorial, we’ll use some simple code to change the background color and then some fancy code to add an image to the side of the announcement bar.

If you want to use an image for the entire background, check out this tutorial

Here is the example code from the tutorial. Be sure to update this with your own image URL and change the values for size and placement so it looks perfect on your own unique website.

.sqs-announcement-bar{
background:#e5f5f6
}
.sqs-announcement-bar-text::before {
background-image: url(url-here);
background-position: center;
background-repeat: no-repeat;
background-size:contain;
content: “ “;
display: block;
height: 4rem;
width: 4rem;
margin-left: 10vw;
margin-bottom: -2rem
}
.sqs-announcement-bar-text-inner {transform:translatey(-1rem)}
@media only screen and(max-width: 640px){
.sqs-announcement-bar-text::before {
margin-left: 30vw;
margin-bottom: 1rem
}
}

⭐ Free Training: Squarespace CSS Basics

📄 Squarespace CSS Selector List

📺 Tutorial: How to add a background image to your announcement bar