How To Add An Image On The Announcement Bar In Squarespace 7.1

Looking to add a special touch to your announcement bar in Squarespace to wow your audience? Learn how to add an image on the announcement bar in Squarespace 7.1 with a little bit of CSS. In order to achieve this, you can copy and paste the code below the video. It’s easy to follow and customizable to fit your needs. Don’t forget to enable the announcement bar on your site. Hope it helps!

If you’re interested in the Serenity squarespace template seen in the video, you can purchase it here!

Don’t forget to subscribe to our youtube channel here!

Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!


Watch the video for How to Add An Image On The Announcement Bar In Squarespace 7.1:

Add the following code:

/* Announcement Bar Image */
//Style content
.sqs-announcement-bar-text {
align-items: center;
display: flex;
justify-content: left;

//Add image
.sqs-announcement-bar-text::before {
background-image: url(ADD IMAGE HERE);
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
content: ”;
display: block;
height: 30px;
width: 60px;

//Mobile Announcement
@media screen and (max-width: 767px) {
#announcement-bar-text-inner-id {
display: block;
#announcement-bar-text-inner-id p:nth-child(3) {
display: none;
.sqs-announcement-bar-text::before {
width: 100px;

Don’t Forget To

Pin Your Favorite

Hey, I’m Marci

I’m the web designer & developer and the woman behind Dragonfly Ave. I love sharing resources, tutorials, biz tips and so much more. Hope you enjoy!

Browse Categories






Shop Website Templates


Pin It on Pinterest