Site Wide Background Image on 7.1

Site URL: https://nothing-matters-old.squarespace.com/clothing/upload/p/bandana

Password: 1234

Hi, I'm looking to add a site-wide background image to my site on version 7.1. I know this is not natively supported but is it possible to achieve it with custom css or code injection? The image I have is small but seamlessly tiles so repeating both horizontally and vertical would be a requirement.

Thanks for any help!

Try adding to Design > Custom CSS

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

SS updated some class name. With anyone see this post, use this new code

.section-background, .page-section, .section-border {
    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;
}

If you want it apply for Main Content only, use this code

article {
.section-background, .page-section, .section-border {
    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;
}

Hi,

I used this code and can't figure out why its not working: 

.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://static1.squarespace.com/static/63f98da46a4cf12fdbebd558/t/640ce488e2e6426ab87bd9b1/1678566539189/contactBac2.jpghttps://static1.squarespace.com/static/63f98da46a4cf12fdbebd558/t/640ce488e2e6426ab87bd9b1/1678566539189/contactBac2.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}

Can you help?

Thanks

12 hours ago, Cbreeze said:

Hi,

I used this code and can't figure out why its not working: 

.section-background, .page-section {
    background: transparent !important;
}
body {
   background-image: url(https://static1.squarespace.com/static/63f98da46a4cf12fdbebd558/t/640ce488e2e6426ab87bd9b1/1678566539189/contactBac2.jpghttps://static1.squarespace.com/static/63f98da46a4cf12fdbebd558/t/640ce488e2e6426ab87bd9b1/1678566539189/contactBac2.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}

Can you help?

Thanks

Change this line

.section-background, .page-section {
    background: transparent !important;
}

to this

.section-background, .page-section, .section-border, .section-divider {
    background: transparent !important;
}

Hi,

can this be easily done the same with a simple background color instead of an image? (for all website sections)

URL: https://quillfish-star-szda.squarespace.com/
Password: planetapes

Thanks a lot!

On 3/13/2023 at 2:52 AM, Itamar said:

Hi,

can this be easily done the same with a simple background color instead of an image? (for all website sections)

URL: https://quillfish-star-szda.squarespace.com/
Password: planetapes

 

Thanks a lot!

Use this

.section-background, .page-section, .section-border, .section-divider {
    background: transparent !important;
}
body {
	background-color: #f1f !important;
}

How do we adapt this so the background stays static? I've changed to

   background-repeat: repeat;
 

Thanks

On 3/18/2023 at 12:03 AM, Skotbites said:

How do we adapt this so the background stays static? I've changed to

   background-repeat: repeat;
 

Thanks

What is static?

You can also try adding this value

background-attachment: fixed;

@tuanphan Any tips for where to upload the image you want to use for a background? I have a JPEG on my desktop and curious where to upload it so I have a URL, like yours: 

background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;

thank you! 

On 4/1/2023 at 2:30 AM, liz003 said:

@tuanphan Any tips for where to upload the image you want to use for a background? I have a JPEG on my desktop and curious where to upload it so I have a URL, like yours: 

background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;

thank you! 

You can follow this guide: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi! This code worked perfectly for the background image I have implemented across my site. I would like to add a green overlay with a light opacity over the image as well. How can I achieve this?

On 11/2/2023 at 7:05 AM, jessicajacques said:

Hi! This code worked perfectly for the background image I have implemented across my site. I would like to add a green overlay with a light opacity over the image as well. How can I achieve this?

You can consider design an image with overlay/light opacity, it will be easier

In case you want to use code, can you share site url? We can check & give code easier