Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
calebCaming

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

Question

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 calebCaming
Initial Revision

Share this post


Link to post

Recommended Posts

  • 1

@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

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 0

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

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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 calebCaming

Share this post


Link to post
  • 1

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


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 0

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

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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 calebCaming
Initial Revision

Share this post


Link to post
  • 0

Glad it worked for you.

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 1

This worked for me on Mentor (part of the Brine family)

#collection-599ddf2ef9a61e945ba20a96 .Main {
background-image: url("//static1.squarespace.com/static/598cdb67e3df282ea8b16720/t/599f370fcf81e02b63285958/1503606545633/sky.jpg")!important;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-repeat: repeat;
}




Edited by allisonstratton820

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...