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

  1. McLean Robbins says:

    Did not work 🙁 Nothing happened.

    • Erin F. says:

      Hi McLean – Sorry for the troubles! Shoot me an email at and I can troubleshoot this with you 🙂

    • Ethan Chin says:

      Did you ever make it work?

      One downside to using squarespace is that the css classes for elements are not the same across different templates.

      If you use Chrome, what you want to do is right click the area you want to edit (in this as the footer) and choose "inspect". This will bring up a huge block of HTML code.

      Click around until you find the block of code that highlights the entire footer area. Copy the class code for that div and paste that into your CSS. Add your styling and voila!

  2. KaeLeigh says:

    Thanks for the easy tutorial! I was able to get just a basic color rectangle background to load, per your directions… but for some reason its showing up with a black border line around it (partially). Only on the left and top of my image. I don’t have any other custom css in my webpage (yet), but also dont want to add anything else until i figure this step out (*womp womp*). Any ideas!?

    • Erin F. says:

      Hi KaeLeigh! Sorry for the troubles – For the graphic you used, maybe try sizing it to a larger pixel size. I use Photoshop to do this. I would recommend at least 2000 pixels wide. Otherwise, let me know the link to your site and I can take a look! Erin

  3. Gift says:

    Hello there your code is working for my website but it’s not the full screen width even I made the photo 2000px wide though. Do you have any further CSS to fix that? my email is

  4. Heatherrr says:

    If anyone is having trouble with the code in the Brine Family templates (I’m using Basil), make sure to leave the quotation marks – but remove the parenthesis. Works like a charm!

  5. Heatherrr says:

    Scratch that. I think that something is just lagging on integrating the code… I’m used to seeing immediate updates when I enter the code. It’s also blowing the image up and doesn’t look right. I’m going to keep messing with it. I am determined to make this work!! LOL. Thanks!

  6. Bruna says:

    I’m trying to add a footer image on the Rally template and it just won’t work! Any way you could help me with this one?

  7. Marcus says:

    Hi everyone!
    I was having issues with my footer image being too large for the space. A work around I found was to add this snippet of code underneath the url

    Background-size: Contain

    It worked for me.

  8. Hi Thanks for your share information

Leave a Reply

Your email address will not be published. Required fields are marked *