Jump to content

attempting to set unique background image for one page, CSS not working with SquareSpace

Go to solution Solved by colin.irwin,

Recommended Posts

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

Edited by Guest
Initial Revision
Link to comment

@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;
   }
}




Edited by Paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

alt text

screen-shot-2016-04-25-at-222828-copy.jpg.5904f8b60c771111e92653fdb5912a21.jpg

Edited by Paul2009
Initial Revision

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

answer now edited :-)

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

@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.

Edited by Guest
Link to comment

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.

Edited by Guest
Link to comment

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • Solution

Something like this should work:


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



Edited by silvabokis
Initial Revision

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

@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?

Link to comment

@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?

Link to comment

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;

}




Edited by Guest
Initial Revision
Link to comment

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

Edited by caugustllc
Initial Revision
Link to comment

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;}}

Link to comment

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.

Link to comment
  • 11 months later...

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.

Link to comment
  • 1 month later...

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; }

Link to comment
  • 2 weeks later...

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.