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

Hi there, I wanted to know if it's possible to use a background and let the content scroll but the background stay the same ? As soon as I add the page block my design goes away and it doesn't show the pink or blue design. I'd just like it to be that the content scrolls but the background doesn't

On 11/24/2024 at 12:10 PM, khernandez__ said:

Hi there, I wanted to know if it's possible to use a background and let the content scroll but the background stay the same ? As soon as I add the page block my design goes away and it doesn't show the pink or blue design. I'd just like it to be that the content scrolls but the background doesn't

Do you have link to this page?

So sorry I was on vacation. 

Here is the site we only have a coming soon page but if you look at the footer you can see that it changes 

https://www.sosaievents.com/