Adding a custom background to a page/section in 7.1 - Trouble with code

Site URL: https://www.impactpa.church/kids

I've  done quite a bit of browsing across the web trying to follow different tutorials to get a custom background to work in squarespace. Does 7.1 even allow custom backgrounds?

I've tried using some different backgrounds from heropatterns.com but haven't been able to get any to work.

I'd ideally like to use the background for the whole page minus the header and the footer, but I can't even get my code to work for a section.

.page-section[data-section-id="5f6202a7242abe11d0086eec"] {background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
} 

Any help is appreciated!

Hey Creedon,

That did the trick! Would this also work if I needed to do the whole page? Would I just replace the data-section-id with the collection id?

For a whole page effect we need something different.

Remove the previous CSS, make a copy somewhere and add the following to Design > Custom CSS.

#collection-5f6133c1b027eb36546c97a1 {

  background-color : #dfdbe5;
  background-image : url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  
  }

#collection-5f6133c1b027eb36546c97a1 #page .page-section,
#collection-5f6133c1b027eb36546c97a1 #page :not( .has-background ) .section-background

  {
  
    background-color : transparent;
    
    }

Let us know how it goes.

This works great! Thank you so much!

does not: (.has-background} only work in sections where a background has not been set? Is there code for when there is a background set and you want it to be overridden say just in the mobile view? Thanks

18 hours ago, AClark said:

does not: (.has-background} only work in sections where a background has not been set?

Yes that is what the not does.

18 hours ago, AClark said:

Is there code for when there is a background set and you want it to be overridden say just in the mobile view?

Probably. It would be most useful if you could describe the effect you are trying to achieve.

Please post the URL for the page on your site where you are trying to achieve the effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 2/14/2021 at 5:22 AM, creedon said:

I have a similar question with setting a background for a header on 7.1 and I'd appreciate your help - should I post it right here or create a new topic?

My website is at https://valueadd.one and the background image is at https://static1.squarespace.com/static/5fd93e78d71790315b73d336/t/6043d0d6aa4f2f10d5ed8f6d/1615057111443/60287_edited.png

Thanks!

Add the following to Design > Custom CSS.

:not(.has-background) [data-section-id="5f6202a7242abe11d0086eec"] .section-background {

  background-color : #DFDBE5;
  background-image : url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  
  }

This is for a v7.1 site and specific to the OP's needs.

Let us know how it goes.

@Vit

Add the following to Design > Custom CSS.

#header {

  background-image : url('https://static1.squarespace.com/static/5fd93e78d71790315b73d336/t/6043d0d6aa4f2f10d5ed8f6d/1615057111443/60287_edited.png');
  
  }

This is for v7.1.

Let us know how it goes.

@creedon

Thank you so much - it worked awesome!

On 3/7/2021 at 4:36 PM, Vit said:

@creedon

Thank you so much - it worked awesome!

Hi. I see on mobile, text overlap input button.

Add this to Design > Custom CSS to add a spacing between them.

/* Footer text overlap button */
@media screen and (max-width:767px) {
footer.sections .newsletter-form-footnote {
    margin-top: 20px;
}
}

@tuanphan

Thank you for pointing out this!

On 2/13/2021 at 7:22 PM, creedon said:

Add the following to Design > Custom CSS.

:not(.has-background) [data-section-id="5f6202a7242abe11d0086eec"] .section-background {

  background-color : #DFDBE5;
  background-image : url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  
  }

This is for a v7.1 site and specific to the OP's needs.

Let us know how it goes.

Hi Creedon,

When using an svg as a background, is it necessary to include the full svg code in the url? I've seen a couple other posts that also refer to converting the svg to base64. But I'm using the url I pulled from having uploaded the svg file, and it seems to work fine -- though I've not tested it across all browsers. Is this method not advised?

Thanks,

john

31 minutes ago, polizzi said:

When using an svg as a background, is it necessary to include the full svg code in the url?

No.

As I understand it there are 3 ways to include SVG.

As code within a page via a code block or code injection.

Via a url that references a file such as <img src="my.svg" />.

Via a url that references a file such as above but the SVG is encoded in the tag itself.

I would only use the last method if the other two couldn't be used. There do seem to be some potential ins and outs with this method. Although the following article is older some of the issues may still apply.

Probably Don’t Base64 SVG

hey @creedon,

I'm trying to adapt your code to a new site. Essentially, I want to add an image to the header section for the store and product pages of the site, but I don't have that option in the Design Site Styles and I don't know what code to use. I've added some screen shots. I want to have the purple leopard print in the header section for the product and other pages.

@ty.hunt

Your site is v7.0 using the Brine template family. The store page on Brine has an intro area at the top where you can put content.

@creedon Apologies. I don't know where to access the Intro area. Where can I find it?

@ty.hunt

Please see Brine template family - Intro areas.