How use an image for your horizontal line in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to use an image for the horizontal line in Squarespace.

A few important things to note before you copy and paste this into your own site:

→ There is more than one way to do this! This is just one approach of many because code is super customizable. 

→ I recommend using an image you upload into your site files so you can make sure you have access to it; using an image hosted by someone else means that the owner could take it down or change it without you knowing, messing up all your hard work!

Here are the steps from the tutorial:

1. Upload the image to your Squarespace website (Design > Custom CSS > Manage Custom Files)

2. Paste the code below in your Custom CSS (Design > Custom CSS)

3. Replace the text image-url-here with your own image url from the custom files section, making sure to leave the individual quotation marks around the url itself.

4. Adjust the height so the line looks the way you want it to!

5. Pat yourself on the back for creating a unique site with some custom code you rockstar!

Here are the codes from this tutorial:

Change the line to a single instance of the image

hr{background-color:transparent!important; background-image:url('your-url-goes-here'); background-size:contain!important; background-position:center;background-repeat:no-repeat!important; height:30px!important}

Need to make it bigger?

Change the number 10 in height:10px!important to something larger

Want it to repeat horizontally?

Try background-repeat: repeat-x

Want it to repeat vertically?

Try background-repeat: repeat-y AND increase the height