CSS for a Background

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

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?

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

Add to Cover Page Settings > Advanced > Header

Custom CSS box can't affect Cover Page

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

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?

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

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

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

Add above code + this code

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

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

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

1 hour ago, tuanphan said:

background-size: cover;

background-size: contain;

background-size: auto;

you can try

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

David

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?

That is correct. I know we would need to generate responsive code to cover mobile devices.

Hi, I've tried the code above on my Squarespace site but this isn't working.

This is what I've put in:

.homepage div#siteWrapper {
    background-image: url(https://static1.squarespace.com/static/6116850124779a5aa1475b06/t/611a7731119a296f45de8abb/1629125207702/jacob-mejicanos-1ECUhpuUOlw-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: fixed;
}

Are there any errors? Nothing is coming up

On 8/20/2021 at 3:43 PM, Isobel12345 said:

Hi, I've tried the code above on my Squarespace site but this isn't working.

This is what I've put in:

.homepage div#siteWrapper {
    background-image: url(https://static1.squarespace.com/static/6116850124779a5aa1475b06/t/611a7731119a296f45de8abb/1629125207702/jacob-mejicanos-1ECUhpuUOlw-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: fixed;
}

 

Are there any errors? Nothing is coming up

Hi,

What is your site url?

Hi Tuanphan,

It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1.

Many thanks

On 8/25/2021 at 3:36 PM, Woodshack said:

Hi Tuanphan,

It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1.

Many thanks

Try this code

/* Site background image */
.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}

The fixed position is working on desktop but this doesn't fix on mobile. Is there a way to make it fixed on mobile please?

On 9/3/2021 at 10:12 PM, Chloe123 said:

The fixed position is working on desktop but this doesn't fix on mobile. Is there a way to make it fixed on mobile please?

Hi,

can you check password again?

Quote

guitar1.

Hi @tuanphan, 

The fixed background works on Desktop, but when I look on my phone this doesn't work and the image is stretched and scrolling with other content.

Do you know if there's a way around this?

The link for the site is: dalmatian-dachshund-ba7x.squarespace.com
and password: guitar1

Thanks

On 8/25/2021 at 3:36 PM, Chloe123 said:

Hi Tuanphan,

It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1.

Many thanks

23 hours ago, Chloe123 said:

Hi @tuanphan, 

The fixed background works on Desktop, but when I look on my phone this doesn't work and the image is stretched and scrolling with other content.

Do you know if there's a way around this?

The link for the site is: dalmatian-dachshund-ba7x.squarespace.com
and password: guitar1

Thanks

Hi, Which page did you add the code?

Hi @Tuanphan, 

I added it to the Custom Css Part

On 10/11/2021 at 9:10 PM, Chloe123 said:

Hi @Tuanphan, 

I added it to the Custom Css Part

Hi,

Sorry, I meant which page you want to apply the code