How To Add CSS Background Patterns With SVG's In Squarespace

     An example of using an SVG background pattern on a site in Squarespace.

Images In Squarespace

Squarespace is big on images—by design. Just look at the template demos. Each one is geared toward the use of large, gorgeous images. Although Squarespace has moved more and more deeply into 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.

But sometimes a photo or other image isn't the right choice for a banner or background in Squarespace. Images resize for different devices, and you may find parts of your images get cut off in an unsightly way. Getting sizes and the focal point right can be a pain. Images also tend to take a good deal of time to load. Often they are one of the main causes of a slow website, and even on a fairly well optimized site, they will take up a good chunk of the 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. 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: CSS Background Pattern to Scale And Repeat

Fortunately, a few lines of CSS3 quickly loads an SVG background pattern that is clear and responsive regardless of screen size. You can also get some really neat effects. 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 around the web 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.

Create The SVG Background

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

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 Editor. 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 Image Blocks? 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 Squarespace will add the ability to upload SVG files 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 CSS3 SVG backgrounds present.