Hello Squarespace Answers community,

I'm working in the Encore template and I would really like to set a background image for one of my pages. I have an image in the background of my info page and a default black background set for the rest of the website. The encore template currently only allows 1 unique background image-on the info page. I looked into other templates and found that it would be best for me to try to work with the Encore template. I contacted Squarespace Customer care and they recommended that I try using Custom CSS.

I looked up several tutorials on CSS coding within squarespace and CSS coding in general. I tried to code the image into this one page. Squarespace will not (no matter what I do) show the image on this one page. It seemed like it was not responding to the code, but when I put in the background-color command, squarespace responded no problem. I'm also not getting any error messages with the current code.

Could it be that the Encore template background overrides the custom CSS background image? Or maybe the image is stuck behind the default background image I selected for the rest of the site. Is it even possible for me to have an image on one page (other than the info page) in the encore template using Custom CSS? And if so, am I going down the right path to do so? Maybe there's something wrong with my code-or a different code that would work better.

Custom CSS code:

collection-id-thingy

{

background-repeat:repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-image: url ('http://a-image-url.jpg');

}

Any help at all is appreciated,

Thank you,
Caleb

@calebCaming, have you tried

#collection-55a5af43e4b0aac39df22df0 {
 #outerWrapper {
   background-image: url("http://static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg")!important;
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
   background-repeat: repeat;
   }
}

link is here: http://www.calebcaming.com/music

image is this:

link is here: http://www.calebcaming.com/music

image is this:

Thank you for getting back to me so quickly! just tried that, still no dice.

Thank you for getting back to me so quickly! just tried that, still no dice.

Aha! I've edited the question to include the reference to this image.

that's amazing. How do I get my page to look like that?

that looks amazing! How do I get my page to look like that?

answer now edited :-)

@Paul2009 I'm still seeing a black backdrop with no image. If there's a line that says background-image: none, it's not in the Custom CSS code that I wrote. At least from what I can tell.

My Custom CSS code is:

#collection-55a5af43e4b0aac39df22df0 
{
#outerwrapper {
      background-image: url ('http://static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg')!important;
}

background-repeat:repeat;  
 background-position: center center;  
 background-size: cover;  
 background-attachment: fixed;  

}  

would send a screenshot, but can't figure out how to on the computer I'm currently on.

It's case sensitive - it's "#outerWrapper" with a capital W. :-)

@silvabokis this worked!
but so far I can only see the picture on the Squarespace editing side. It hasn't shown up on the actual site yet. Maybe the code takes a little longer to update than template changes?

@silvabokis this worked!
but so far I can only see the picture on the Squarespace editing side. It hasn't shown up on the actual site yet. Maybe the code takes a little longer to update than template changes?

I also made a couple small edits to the code. So that now it says this:

body#collection-55a5af43e4b0aac39df22df0 {

    background-position: center top !important;
    background-repeat: no-repeat;
    background-image: url("//static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg");
 background-size: contain;

}

(I think the "background-size: contain" command was messing it up for some reason).

Glad it worked for you.

Please accept the answer and/or vote it up if you think your issue is resolved.

Hello, I'm trying to implement this in avenue template and I've added the image in style editor, but I only want it to appear on one page. Its accepting this CSS: body#collection-57218a18555986178fe56abc { background-position: center top !important;background-image:url("http://static1.squarespace.com/static/56d79456746fb902cc983b5b/t/57219426b09f9564c0b476af/1461818445126/Four+Day+Ray-Commercial-Architecture-Project-Fishers-Indiana.jpg") ; }

BUT the image is still on all pages, not the one I want-#collection-57218a18555986178fe56abc

Any help or feedback would be greatly appreciated! Thank you! @calebcaming @paul2009

URL: caugustllc.com Pass: MDA1

Just Added This CSS and Still Same Issue:

collection-57218a18555986178fe56abc {

outerWrapper {

background-image:url ("http://static1.squarespace.com/static/56d79456746fb902cc983b5b/t/57219426b09f9564c0b476af/1461818445126/Four+Day+Ray-Commercial-Architecture-Project-Fishers-Indiana.jpg") ! important; background-position: top left; background-size: cover; background-attachment: fixed; background-repeat: repeat;}}

I'm not very sure if your template is working differently than the templates I've worked with but using id that is "#collection-..." doesn't work for me.

Try using classes and well defined IDs (like #header, #content-wrapper, #content etc). I think that IDs like "#collection-..." are generated at runtime by squarespace framework.

I hope this helps.

Hi silvabokis,

This works great, however I have an issue. When I put in the code to your image it works fine. But when I upload my own image I want for the background, it only works for the site build, not live. I've uploaded my image to Squarespace as a link - so the file I put into the code looks like this /s/BGpic.jpg.

I tried the above method:I can change other things on my web page using custom CSS, but not the background image. Can someone help?

the template that I use is Brine.

here is the web page that I try to change:http://babyneeds.love/new-landing-page

here is the CSS that I use:body#collection-59123dfc6b8f5bb74e617b85 {background-image:url("http://static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg")!important; background-position: center center; background-size: cover; background-attachment: fixed; }

Hi!

I am also having the issue! I have a different template 'Mojave' and want a separate background image on my 'about' page. I tried this code and it isn't working. I also do not know what is meant by 'image url' where do I upload my image too? To a separate page in squarespace? i don't at all understand what image url means? I uploaded my image to a dropbox and have a link for that.. Please help.

My site page is:https://womans-voices-now.squarespace.com/missionPlease help.Thanks!Thea