How do I add a background image to a blank page in SS?

I think what I'm looking for is pretty easy for someone who knows what that html thing does, but for a total newb, everything I google looks like an alien language... How do I make a background image for the text on the page?

I asked SS and they said it needed to be coded.... so:

Where does the code go? Page header code injection? Code block?

I think I know the url of the image I uploaded to SS... if I do, what 'alien language' goes in front of and behind it to make it show up on the page I have now?

Here's what I googled:


But that didn't seem to do anything :)


body {
  background-image: url("");
  background-position: 50% 50%;
  background-repeat: no-repeat;

That didn't do anything either...

Thanks in advance for any help!


asked Nov 26 '12 at 13:27 by John Fiorello 11113

The CSS you added looks good, actually. It should work. The only problem I noticed is the link to the image is broken.


If you fix that image path, it should work.

answered Nov 26 '12 at 14:01 by foleyatwork 9.3k2813


Ok, so which one was the CSS?

(Nov 26 '12 at 14:22) John Fiorello

This is the CSS:

body {
  background-image: url("");
  background-position: 50% 50%;
  background-repeat: no-repeat;

This goes in your Custom CSS, the only problem is the URL. Once that's fixed this should work just fine.

(Nov 26 '12 at 14:30) foleyatwork

Do you know where I add Custom CSS in squarespace 6?

(Nov 26 '12 at 15:20) John Fiorello


  1. Make sure you're logged in, then go and look at the front-end of your site. (If you're in the back-end, just click the eyeball.)
  2. Click on the paintbrush icon in the bottom right hand corner.
  3. Click on "Custom CSS" in the bottom left hand corner.
(Nov 26 '12 at 15:25) foleyatwork

Will that allow me to change the 'CSS' for the page I'm looking at or all my pages? I only want to add the background to one page. Thanks for your help, btw!

(Nov 26 '12 at 15:29) John Fiorello

That will target your whole site. To target one single page, replace "body" with the page ID. You can find the page ID by viewing the source of any given page and looking for the opening <body> tag. There should be a piece of code that says id="someRandomID" inside that body tag. It will look something like this.

<body id="collection-5091612de4b05d6afd9e784a" ="">

If you can't find it, just post a URL and I'll grab it for you.

(Nov 26 '12 at 15:41) foleyatwork

Thanks, I think I found it but it's not labeled id... could you look at it for me?

(Nov 26 '12 at 16:22) John Fiorello

Oh, maybe I was looking in the wrong place. Is it this?



(Nov 26 '12 at 16:23) John Fiorello

This is your body ID. "#collection-50a667dfe4b0e80bad9cf7a8"

I think your CSS is in the wrong place, too. It shouldn't be visible on the front-end like it is now.

(Nov 26 '12 at 16:24) foleyatwork

Yup, that's it. To use that in Custom CSS, just add a pound sign before the id.

(Nov 26 '12 at 16:25) foleyatwork

Ok, here's what I have, but it's saying 'syntax error'

id="collection-50a667dfe4b0e80bad9cf7a8 {

background-image: url(""); background-position: 50% 50%; background-repeat: no-repeat; }

(Nov 26 '12 at 16:29) John Fiorello
#collection-50a667dfe4b0e80bad9cf7a8 {
  background-image: url("");
  background-position: 50% 50%;
  background-repeat: no-repeat;
(Nov 26 '12 at 16:31) foleyatwork

Holy Crap it WORKS! Thank you!!

Now I think I can search around to find how to get the image to start lower on the page.

Thanks for your help with this alien language :)

(Nov 26 '12 at 16:37) John Fiorello

Try changing the second 50% in background position to a negative number. That's where it's positioned on the vertical axis, if you play around with that number you should be able to get it.

(Nov 26 '12 at 16:40) foleyatwork

Yep, that did it :) Now that I have a good tutorial above I'm gonna experiment with swapping out images!

I appreciate it!


(Nov 26 '12 at 17:11) John Fiorello
showing 5 of 15 Show All

I had this problem too. You can upload the background image by clicking on 'Custom Files' in the CSS module. Once it has uploaded, clicking on the file in the right hand column will insert the correct URL for the file into the CSS code module. You can then move the URL into the right place and it should work.

answered Nov 27 '12 at 02:41 by damienvc 11113

Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: Nov 26 '12 at 13:27

Seen: 5,055 times

Last updated: Nov 27 '12 at 02:41

Established 2004 Handmade in NYC