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

Question

Hello All,

I'm looking to customize the full background of my current template 'Horizon'. I added the following CSS to my Homepage, but I am not seeing the image appear:

#code {
    background-image: url(https://static1.squarespace.com/static/5e8e444d060d9c69061aab33/t/5eaf32a6437a4e57ef531b06/1588540071899/silent-season-background.png);
 }

I'm seeing that SquareSpace does not allow custom code on cover pages. Are they considering index.html/home a cover page?

Any help here is greatly appreciated.

Thanks,
David

Link to post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Looks like percentages are working. Unfortunately, the background is not working responsively for me. David

14 answers to this question

Recommended Posts

  • 0

SS allows custom code on Cover Page.

Add code to Cover Page Header

<style>
  Your css code here
</style>

Can you share link to your cover page?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Hi tuanphan,

I added the style tags as recommended and I couldn't get the background to show - 

<style>
#code {
    background-image: url(https://static1.squarespace.com/static/5e8e444d060d9c69061aab33/t/5eaf32a6437a4e57ef531b06/1588540071899/silent-season-background.png);
 }
</style>

Note: I am adding this code to the 'Custom CSS' area within the platform.

Website is https://www.silentseasonmusic.com

Thanks,
David

Link to post
  • 0
Posted (edited)

Add to Cover Page Settings > Advanced > Header

Custom CSS box can't affect Cover Page

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Can you screenshot the location that we can drop the css that you're speaking of?

I went to the Welcome/Home pages and advanced and dropped the code in each CSS section.

Still not seeing the background change.

Thanks,
David

Link to post
  • 0
16 hours ago, David-Pappy-2020 said:

Can you screenshot the location that we can drop the css that you're speaking of?

I went to the Welcome/Home pages and advanced and dropped the code in each CSS section.

Still not seeing the background change.

Thanks,
David

are you sure this CSS class name is correct?

Quote

 #code

You want to add background image for whole page?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Hi tuanphan,

I referenced the sample CSS from an instructional video on SquareSpace. I'm not very experienced with CSS, as I am more involved with HTML only.

Yes, I would like to add this background image to the whole page. 

Thanks,

David

Link to post
  • 0
19 hours ago, David-Pappy-2020 said:

Hi tuanphan,

I referenced the sample CSS from an instructional video on SquareSpace. I'm not very experienced with CSS, as I am more involved with HTML only.

Yes, I would like to add this background image to the whole page. 

Thanks,

David

Add to Home > Design > Custom CSS

.homepage div#siteWrapper {
    background-image: url(https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
Posted (edited)
On 5/7/2020 at 4:36 AM, tuanphan said:

Add to Home > Design > Custom CSS


.homepage div#siteWrapper {
    background-image: url(https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Hi tuanphan,

We're getting close here - www.silentseasonmusic.com

All I need now is to fix the picture size (Can we add dimensions to the size tag?), and make sure the image extends to the navigation and footer.

Thanks for all of the help!

David

Edited by David-Pappy-2020
Link to post
  • 0

Add above code + this code

.homepage footer#footer {
    background: transparent;
}
.homepage header#header {
    background: transparent !important;
    position: absolute;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Hi tuanphan,

Thanks for the additional code as it worked out perfectly!

How can I control the size of the background? As you can see it's zoomed in if you visit www.silentseasonmusic.com

Should I make a change to the original background file or include size percentages in my code?

Best,
David

Link to post
  • 0
1 hour ago, David-Pappy-2020 said:

Hi tuanphan,

Thanks for the additional code as it worked out perfectly!

How can I control the size of the background? As you can see it's zoomed in if you visit www.silentseasonmusic.com

Should I make a change to the original background file or include size percentages in my code?

Best,
David

background-size: cover;

background-size: contain;

background-size: auto;

you can try

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
8 hours ago, David-Pappy-2020 said:

Looks like percentages are working. Unfortunately, the background is not working responsively for me.

David

You mean on mobile?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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