How to add a background to 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

In this tutorial, I’ll teach you how to change the background of your announcement bar in Squarespace. We’ll use simple code to change the color and then well add a background image and a repeating pattern.

All three codes from this tutorial are below, but there are some key steps you’ll need to learn about, so be sure to watch the tutorial before you try them on your own site!

If you want to add a small image for the side of your announcement bar, check out this tutorial

Video tutorial

Code Example

This code changes the background color and adds a unique border and box shadow:

.sqs-announcement-bar{
background-color: #e5f5f6;
border: 1px solid #333;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1)
}

This code adds a background image. Be sure to change the background color code to match our own website; this color will be shown if there is any issue uploading the image.

.sqs-announcement-bar{
background-color: #e5f5f6;
background-image: url(image url here);
background-size: cover;
background-repeat:no-repeat
}

This code adds a background image. Be sure to use the URL for an image hosted on your own site, and change the percentage to change the size of the image and how often it will repeat.