How to Add a Pretty Footer in Squarespace with CSS (p.s. it’s easy!)

Today I’m dropping in to give you a quick tutorial on how to add a pretty footer image into your Squarespace template!

Have you ever wondered how you get an eye-catching footer image to show up in your Squarespace template? Have you ever tried CSS to spruce up your site?

I’m here to tell you “Don’t be afraid, girl!” and “You’ve got this!”

CSS stands for “Cascading Style Sheets” and basically I like to think of it as the outer appearance of your website, or like the clothes, makeup and jewelry we wear every day to enhance our beauty! It’s a little bit of code you can add into the Squarespace backend, that can take your template from bland to custom!

Ok, let’s get into it

You can basically just copy and paste my code, upload your own pretty image, and viola!

Here’s where you enter the code in Squarespace:

Once logged into your Squarespace account, go to your menu. Then select Design > Custom CSS.

Copy and paste the following code into the box:

footer {
background-image: url(“https://static1.squarespace.com/static/5908a95e1b10e3089ef71d4d/t/59133e9fb8a79bbbbc3be338/1494433439356/footer+image+imagenamehere.jpg”);
}

Once this is copied in, your gonna want to click the button that says “MANAGE CUSTOM FILES.”

This is where you will upload the image that you want to use in your footer. I recommend the size of 400 – 800 pixels tall by 2000 pixels wide. Also, make sure the image is saved down to a file size of 300kb (kilobytes) or less. I usually edit my images in Photoshop, just to get them to the right size. If the file size is too large, your site will load slower.

Next, you will see that the URL for the image you just uploaded was placed directly below the CSS code I had you enter earlier. You will want to select this URL code (of your newly uploaded image), and do a Command X for “cut.” Then, highlight over the code I had you put in (the URL portion only, stay within the parenthesis) and do a Command V for “paste.” This will paste your image URL in the code so that your footer shows up correctly.

For example, the code that is highlighted is where you will want to paste your new image code over:

Go back to your main menu, refresh the page, (sometimes you have to log out and then login again), and viola! Your beautiful footer should appear.

You’ve just entered some custom CSS to your site, and spruced up your boring footer! Good job girlie!

Here’s an example of a glitter-enhanced footer I recently designed for a client:

Any questions or want to show me a link to your new footer? Comment below!