How to feature an image on your announcement bar

Nov 28

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded in Squarespace 7.1 but it will also work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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

Video tutorial

Code Example

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
}
}