IMPACT Posted February 13, 2021 Share Posted February 13, 2021 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! Link to comment
Solution creedon Posted February 14, 2021 Solution Share Posted February 14, 2021 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. IMPACT 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
IMPACT Posted February 15, 2021 Author Share Posted February 15, 2021 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? Link to comment
creedon Posted February 15, 2021 Share Posted February 15, 2021 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. IMPACT 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
IMPACT Posted February 22, 2021 Author Share Posted February 22, 2021 This works great! Thank you so much! creedon 1 Link to comment
AClark Posted February 23, 2021 Share Posted February 23, 2021 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 Link to comment
creedon Posted February 24, 2021 Share Posted February 24, 2021 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Vit Posted March 6, 2021 Share Posted March 6, 2021 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. Link to comment
creedon Posted March 6, 2021 Share Posted March 6, 2021 @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. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Vit Posted March 7, 2021 Share Posted March 7, 2021 (edited) @creedon Thank you so much - it worked awesome! Edited March 7, 2021 by Vit tuanphan and creedon 2 Link to comment
tuanphan Posted March 15, 2021 Share Posted March 15, 2021 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Vit Posted March 15, 2021 Share Posted March 15, 2021 @tuanphan Thank you for pointing out this! Link to comment
polizzi Posted June 22, 2021 Share Posted June 22, 2021 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 Link to comment
creedon Posted June 22, 2021 Share Posted June 22, 2021 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 polizzi 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ty.hunt Posted July 18, 2021 Share Posted July 18, 2021 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. Link to comment
creedon Posted July 18, 2021 Share Posted July 18, 2021 @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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ty.hunt Posted July 18, 2021 Share Posted July 18, 2021 @creedon Apologies. I don't know where to access the Intro area. Where can I find it? Link to comment
creedon Posted July 18, 2021 Share Posted July 18, 2021 @ty.hunt Please see Brine template family - Intro areas. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment