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

I think what I’m looking for is pretty easy for someone who knows… How do I make a background image for the text on the page?

I think I know the URL of the image I uploaded to Squarespace.

Here's what I found:

</HEAD>
       <BODY BACKGROUND="http://static.squarespace.com/static/50217df484ae19fecb24d8cf/t/50b3a685e4b054abacda35b7/1353950860399/pool%20background.png">

But that didn’t seem to do anything. Or:

body {
  background-image: url("http://static.squarespace.com/static/50217df484ae19fecb24d8cf/t/50b3a685e4b054abacda35b7/1353950860399/pool%20background.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

That didn’t do anything either. Thanks in advance for any help!

JF

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.

Link

If you fix that image path, it should work.

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

link

Ok, so which one was the CSS?

(Nov 26 '12 at 14:22) John Fiorello John%20Fiorello's gravatar image

This is the CSS:

body {
  background-image: url("http://static.squarespace.com/static/50217df484ae19fecb24d8cf/t/50b3a685e4b054abacda35b7/1353950860399/pool%20background.png");
  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 ♦♦ foleyatwork's gravatar image

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

(Nov 26 '12 at 15:20) John Fiorello John%20Fiorello's gravatar image

Sure.

  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 ♦♦ foleyatwork's gravatar image

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 John%20Fiorello's gravatar image

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 ♦♦ foleyatwork's gravatar image

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

http://john-fiorello.squarespace.com/pool-phones

(Nov 26 '12 at 16:22) John Fiorello John%20Fiorello's gravatar image

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

id="collection-50a667dfe4b0e80bad9cf7a8

?

(Nov 26 '12 at 16:23) John Fiorello John%20Fiorello's gravatar image

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 ♦♦ foleyatwork's gravatar image

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

#collection-5091612de4b05d6afd9e784a
(Nov 26 '12 at 16:25) foleyatwork ♦♦ foleyatwork's gravatar image

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

id="collection-50a667dfe4b0e80bad9cf7a8 {

background-image: url("http://static.squarespace.com/static/50217df484ae19fecb24d8cf/t/50b3c0a7e4b05036d3b1b304/1353957548372/pool%20background.png"); background-position: 50% 50%; background-repeat: no-repeat; }

(Nov 26 '12 at 16:29) John Fiorello John%20Fiorello's gravatar image
#collection-50a667dfe4b0e80bad9cf7a8 {
  background-image: url("http://static.squarespace.com/static/50217df484ae19fecb24d8cf/t/50b3c0a7e4b05036d3b1b304/1353957548372/pool%20background.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
(Nov 26 '12 at 16:31) foleyatwork ♦♦ foleyatwork's gravatar image

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 John%20Fiorello's gravatar image

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 ♦♦ foleyatwork's gravatar image

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

I appreciate it!

JF

(Nov 26 '12 at 17:11) John Fiorello John%20Fiorello's gravatar image
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

link
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](http://url.com/ "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

Tags:

×18

Asked: Nov 26 '12 at 13:27

Seen: 7,703 times

Last updated: Sep 29 at 07:42

Established 2004 Handmade in NYC