How To Add A Background To Your Heading In Squarespace
So, you’ve chosen Squarespace to be your online CMS and now you want ways to customize your site to make it more you! Have you ever gone to a website and noticed that the headers are highlighted with a colored background but don’t know the first thing about how they did it? I’ll tell you a little secret. It’s CSS. I know! When you hear CSS, you think, “Nope. Way too hard.” But, I promise you it’s not.
If you don’t know what CSS means, it’s an abbreviation for Cascading Style Sheets. To keep it short and simple (Because this isn’t a CSS class), CSS describes how something should be displayed on a document, screen or in other media.
If you want to know how I got my header from this
to this
copy and paste this code below:
h1 {
display:inline-block;
background: linear-gradient(to top, #77BCAA 50%, transparent 50%);
background: -moz-linear-gradient(to top, #77BCAA 50%, transparent 50%);
background: -webkit-linear-gradient(to top, #77BCAA 50%, transparent 50%);
}
.text-align-center {
display: table !important;
width: auto !important;
margin: auto !important;
}
Don’t know where to paste it? No problem
Take these steps below
Go to your Home page
Click design
Click Custom CSS.
Copy and paste!
* Note- You can add backgrounds to any header you want by simply changing H1 to H2 or H3.
You can also tweak it a bit by changing the hex code to the color of your choice and by changing the percentages. You can also change the direction by changing the word, ‘top’ to ‘bottom’. Play around with it until you love what you see!
I hope this helps. Until next time.
- Jenai C