How To Add Background Patterns In Squarespace
An example of using an CSS background pattern on a site in Squarespace.
Why Replace Squarespace Background Images With Patterns
Squarespace is big on images—by design. Just look at the template demos. Each demo is designed around the use of large, gorgeous images. Although Squarespace has moved more and more deeply into e-commerce, other platforms, like Shopify, are its superior there. But for fairly static, presentational sites Squarespace's strengths come out. That's why the demos feature a lot of white space and move away as far as possible from the cramped sites of yesteryear.
The Problem With Background Images
But sometimes a photo or other image isn't the right choice for a banner or background in Squarespace. There are two main reasons for this.
Images resize for different devices. You may find parts of your images get cut off in an unsightly way. Getting image sizes and the focal point right can be a pain.
Images tend to take a good deal of time to load, hurting SEO. Often they are one of the main causes of a slow website, and even on a fairly well optimized site, they take up a good chunk of the total time needed to load. As Google prioritizes speed more and more, we need to look everywhere we can to speed up our sites.
Enter background patterns. They suit the Squarespace bias toward big, dramatic presentation, but load faster than photos. And they can add a note of sophistication that a photo or illustration might not hit. Sometimes you just need something different. They can also be great to use in conjunction with photos, not as a replacement for them. Layering photos over background patterns can work beautifully.
Wanted: Backgrounds That Repeat
Fortunately, a few lines of CSS quickly loads an SVG background pattern that is clear and responsive regardless of screen size. You can also get some really neat effects, like tiled backgrounds. SVG stands for Scalable Vector Graphics. Scalable means you won't lose any image quality no matter how large or small the screen.
There are quite a few sites offering CSS background patterns. One of the best is Steve Schoger's Hero Patterns, which offers a collection of over eighty repeatable SVG background patterns, entirely free. Yes, they repeat, so you don't have to worry about the size or shape of the container. You can adjust opacity and foreground and background color easily, making it easy to integrate the patterns into your designs and color palettes. And it's not hard to use them.
First, Create The Pattern
Heading to Hero Patterns, you have a large selection of patterns available. The length of code for each varies a lot. Let's choose a relatively short one called "Formal Invitation." (The gears pattern for the test site in the hero image above is quite long.) There's a foreground opacity slider you can play with to get the opacity you wish. You'll see both the opacity and the code change as you move the slider. You can also set colors.
I played around with it and got some CSS, which I copied. So let's see it in action in a markdown block.
Add A Background Pattern To A Block In Squarespace
We can use this code as a background practically anywhere. It could even be used instead of a plain color to snazz up a button, so long as you have the block id. Or let's say we want to use it for a markdown block. Like so:
LOOK AT THAT FUNKY BACKGROUND!
That's a markdown block with an SVG background. It was simple to create using the Chrome Squarespace Collection/Block Identifier extension (or Chrome or Firefox's inspection tools) to identify the block, then wrapping the code inside the identifier's brackets:
#block-yui_3_17_2_1_1521065504999_37962 {background-color: #e31a2f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%2398ac92' fill-opacity='0.69' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");}
Everything inside the brackets was copied from the Hero Patterns code. Add the whole thing at Design > Custom CSS in the Home Menu. Simple.
Add A Background Pattern To A Page In Squarespace
What about an entire page? Squarespace templates differ slightly in how you target specific types of pages in different templates. You'll need to figure out how to target your particular page. But usually it is as simple as "#page" or "#page-section", or you can just use the Block Identifier extension to get the id for the page right at the top. The page you are on now, for example, is #item-5aa04f86ec212da673a95bdb. The "item" is used because it is a blog post.
So to get the page to have the "Endless Clouds" background pattern from Hero Patterns that you see as a page background now, the code was:
#item-5aa04f86ec212da673a95bdb {background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239C92AC' fill-opacity='0.1' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");}
Lots of crazy numbers and characters! But it works.
SVG's in Squarespace? Someday.
There's not much more to say. Use your imagination. Try different blocks yourself. Buttons, markdown blocks, text blocks—get creative. These patterns work almost everywhere they would add something positive to your designs.
Someday, hopefully, Squarespace will add the ability to upload SVG’s themselves to image blocks. It would be very helpful for using icons in Squarespace, which currently require PNG's if you don't want to get your hands dirty. And PNG's have a lot of problems when they scale. (See Kerstin Martin's article on using PNG's in Squarespace for one way to try get around that.) Given how image-centric Squarespace is, it's a bit surprising they haven't already. But you don't need to be limited by the platform. In a future post I'll discuss how to add SVG files to Squarespace. But don't neglect all the possibilities CSS backgrounds present.
Want To See More Squarespace Hacks?
From background patterns to fun with fonts. From animated gradients to getting that little scroll indicator in the Brine family of templates to bounce. Check out custom CSS tricks and other code hacks that will help you design a better Squarespace website.