How to add a background or border to an image block in squarespace
Truth - I decided to become a Squarespace designer so I wouldn’t have to code and I could just do the fun part of web design….design. Well, Turns out I actually love coding.
Don’t let the word coding scare you away from this tutorial. CSS coding can actually be super easy. If you don’t feel like learning CSS, that is totally okay. I will just give you the CSS to copy and paste!
One of my favorite CSS tricks is adding half-backgrounds to elements to create that layered effect that is currently trending in web design. It is an awesome way to make your design more dynamic.
Today I will be sharing with you, a little CSS trick that will allow you to create backgrounds and borders to your image blocks. You can do this with any template in both 7.0 and 7.1.
You’ll want to start by finding the ID of your image block. To do this, just add the Squarespace ID finder extension to your Google Chrome browser. The ID is what you’ll use in the CSS code to reference your image block. To put it simply. CSS code is what stylizes your website. So when you want to tell an element on your web page to look a certain way, you have to reference that particular element. This is what the ID finder looks like. It looks a bit confusing but the Id is usually located in the top left corner of the element you are looking for. Just click to copy.
Time for the fun part! after you have copied your image block ID you will want to open the Custom CSS window. Home Menu > Design > Custom CSS. Paste Your ID then copy and paste this code underneath -
{
background: linear-gradient(90deg,
#76966b 40%, #fff 0%,);
border: 2px solid #76966b;
height: 300px;
padding: 30px,
}Once you add your CSS, your image block should look something like this! Feel free to play around with the numbers and the color. The color is defined by the Hex Code. In the code pasted above, the color is defined by #76966b. If you would like to chose another color an easy way, is to use this hex color picker.
If you want the background to have an offset, you can just simply add a height property to the background.
{
background: linear-gradient(90deg,
#76966b 40%, #fff 0%,);
height: 300px;
padding: 30px,
}
If you want the background to be angled, just change the first number in the code block where it says ‘90deg’. That stands for 90 degrees.
Now that you have the hang of the CSS for the background, see what you think about adding a border. This code is also very simple.
{
background: linear-gradient(70deg,
#76966b 40%, #fff 0%,);
border: 2px solid #76966b;
padding: 30px,
}
If you don’t want the solid background and just want an outline, remove the background property.
{
border: 2px solid #76966b;
padding: 30px,
}
If you are wondering my favorite way to style the image block using this CSS trick, it is combing the offset background with the border by adding both the height property and the border property.
{
background: linear-gradient(90deg,#76966b 40%, #fff 0%,);
height: 300px;
border: 2px solid #76966b;
padding: 30px,
}
See, that wasn’t so bad was it? Just a few lines of CSS code can go such a long way and add a unique touch to your Squarespace site! And when I say a long way I mean, you can basically add this code to anything with and ID block. Don’t be afraid to play around with the code and see what works for you. Who knows, maybe you’ll grow to love it just like me!
If the overwhelm is setting in and If you are thinking that even with these tips you’ll never be able to pull it off, I get it. It can be overwhelming and it’s okay! That’s what web designers are for. Feel free to check out my services page to see how I might be able to help you while you are kicking a** at building and running your business!
