ebRa Posted October 15, 2020 Share Posted October 15, 2020 (edited) Site URL: https://sealion-dogfish-x6kw.squarespace.com/ Hello everyone! Site is still on trial: https://sealion-dogfish-x6kw.squarespace.com/ I'm trying to place a .svg background image (repeat-pattern) in a specific section; looking for information in the tutorials and in the forum, but I can't get it: Quote #collection-5f590db2781f741e07ed6712 #page section#yui_3_17_2_1_1602763043190_166 .section-background { background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='50' viewBox='0 0 278.66 185.57' %3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M517.33,89.82c-.53-4.56-5.72-6.52-7.37-10.55a468.5,468.5,0,0,0-57,1.07c-20-1.77-33.84-1.72-53-2.24-5-.14-10.06.72-15,1.19-5.3.5-10.63.32-15.7.46-9.76.27-18.86,1.57-28.11,1.26.72-.94-.64,0-.73,0-20,3.61-34.54-.66-51.11,1-15.14,1.55-31.15,0-47.1-.08-7.12,5.16-2,10,.83,16.79A560.5,560.5,0,0,0,279,169.4c13.55,22.46,27.2,44,39.84,66.22,1.87,3.29,4.82,6.52,4.81,10.56-2.35,1.94-6.69.88-10.58,1.16-3.56.26-7.77,1.33-11.67,1.53-4.35.22-8.6-.39-11.32.07-3.13.53-7.88,2.45-8.37,4.8-.92,4.43,2.84,7,4.81,9.47,12.41,1.35,21.14-.51,31.76-1.65,2-.21,4.14-.14,6.21-.4,2.69-.35,5.6-1.22,7.66-.78,4.31.94,99.36-4.2,101.12-5,2.87-1.29,9.85-.36,14.6-.45,8.1-.15,17.86-1.74,25.18-2,3.65-.12,7.08.83,10.22-.79,2.39-4.26-.75-9.8-3-13.49-15,.55-25.23,1.65-37.24,1.32-1.06-6.78,5-9.5,5.75-15.74,7.52-9.42,13.23-22.2,19.15-33.34,2.14-4,3.51-8,5.4-12.08,3.27-7,8.29-14.15,11.92-21.25,3.74-7.31,7.17-14.91,10.82-22.34,3.39-6.9,6.57-15.3,10.82-22.34,1.89-3.14,3.56-6.78,5.78-11C514.67,98.08,517.76,93.47,517.33,89.82ZM313.83,204.55l-.06-.1,1.14.24Zm-4-6.9-.36-.63c2.23.64,4.47,1.29,6.72,2Q313,198.3,309.81,197.65Zm-4.29-7.81-.8-1.47q6.85,2.49,13.79,5.21C314.14,192.27,309.82,191,305.52,189.84Zm-5.23-9.25q-.84-1.42-1.7-2.82,11.31,5,22.85,10.68Q310.77,184.24,300.29,180.6Zm-7.08-11.47-3.31-5.18q17.76,9,35.75,20.08Q309.21,175.8,293.21,169.13Zm-9.37-14.72q-2.74-4.36-5.39-8.83a515.19,515.19,0,0,1,51.18,34A503.81,503.81,0,0,0,283.84,154.41Zm-10.91-18.64c-2.26-4.26-4.4-8.66-6.38-13.25a565.11,565.11,0,0,1,67.38,53A510.93,510.93,0,0,0,272.93,135.77Zm-10.08-22.61c-2.5-6.91-6.41-13.18-7.84-20.09,28,21.77,57.47,49.61,84.21,79.37C314.21,149.53,287.95,129.1,262.85,113.16ZM261,90.34c3.73-.48,7.65-.17,11.31-.2q4.11,0,8.18-.13l-.32.71a971.45,971.45,0,0,1,64.24,78.75C318,140,288.86,112.25,261,90.34Zm26.2-.53c4.65-.16,9.31-.37,14-.58l-.13.25c19.07,28.62,35.11,54.1,48.73,77.47A974.86,974.86,0,0,0,287.19,89.82ZM307.73,89c3.73-.16,7.5-.3,11.34-.42l0,0c12.59,25.7,24.89,51.06,36.14,76C341.86,141.68,326.22,116.79,307.73,89Zm17.71-.59c2.89-.06,5.81-.1,8.79-.11h1l3.85,11.08c7.3,21,14.73,42.35,21.72,63.57C349.82,138.41,337.78,113.56,325.44,88.37Zm19.13,8.86-3.16-9.08q4.34-.1,8.75-.25,2.34,10.46,4.68,20.86c4.06,18.05,8,35.64,11.75,52.91C359.51,140.14,352,118.49,344.57,97.22Zm15.94,10.09q-2.2-9.77-4.4-19.6c2.74-.08,5.47-.14,8.17-.18q1.29,11.61,2.57,23.09c1.9,17.06,3.76,33.68,5.51,50C368.59,143.23,364.61,125.51,360.51,107.31Zm12.13,2.5q-1.24-11.08-2.48-22.29,2.59,0,5.13.11c.9,0,1.83,0,2.76,0,.07,24.53.12,48.74.15,72.45C376.42,143.7,374.55,127,372.63,109.81ZM384,160c0-23.62-.09-47.84-.16-72.47,2.59-.1,5.23-.24,7.88-.42q-2,18.79-3.94,37.2C386.52,136.47,385.26,148.35,384,160Zm9.59-35q2-18.92,4-38.25c2.2-.16,4.37-.31,6.48-.44l1.8-.1q-3.33,15.48-6.68,30.76c-3.23,14.78-6.38,29.22-9.39,43.41Q391.7,143,393.62,125ZM405,118.29q3.51-16.08,7-32.4c3-.15,6-.27,9-.35q-3.65,10.89-7.32,21.75c-6,17.81-12.12,35.92-18,53.93C398.66,147.18,401.78,132.9,405,118.29Zm14.19-9.09q4-11.86,8-23.78h.17c3.31,0,6.58-.12,9.83-.23L434.9,90c-11.26,23.88-22.74,48.23-33.45,72.38C407.22,144.61,413.24,126.76,419.16,109.19Zm21-16.61,3.53-7.5-.11-.13c4-.15,7.93-.3,12-.39-15.75,24.77-32.68,52-48.44,79.51C417.67,140.23,429,116.18,440.13,92.58Zm22.14-7.72-.19-.35c3.53,0,7.13.07,10.86.25,1.14.06,2.27.15,3.41.24-18.32,21.48-41.26,49.73-63.56,80.92C428.92,137.77,446.26,110,462.27,84.86Zm20.93,1.09-.24-.53c.46,0,.92,0,1.38,0,6.06-.05,12-.69,17.66.15-28.35,24-57.71,53.11-84.11,83.24C440.94,136.63,464.68,107.54,483.2,85.95ZM448.84,203.77,447,204l1.91-.43Zm3.7-7q-3.38.74-6.79,1.52,3.61-1.14,7.18-2.23Zm4.41-8q-6.66,2-13.41,4.1,7.19-3,14.28-5.66Zm5.31-9.46h0q-10.73,3.95-21.64,8.45,11.77-6.07,23.28-11.37Zm6.3-11.28-.1-.11q-15.61,6.91-31.72,15.26,17.39-11,34.63-20.33Q470,165.47,468.56,168.05Zm7.35-13.9-.19-.2q-21.33,11.08-43,24.86c14.34-11.08,30.28-22.43,47.41-33.14Q478,149.93,475.9,154.15Zm8.76-17.63-.28-.31A587.63,587.63,0,0,0,428,175.13a653.2,653.2,0,0,1,63.71-52.76Q488.14,129.41,484.66,136.53Zm16.13-31.79c-1.34,2.48-2.67,5-4,7.53l-.42-.39a647,647,0,0,0-72.86,59.39c26.35-29.94,55.58-58.83,83.73-82.48C507.19,94.59,503.45,99.84,500.8,104.73Z' %3E%3C/path%3E%3C/svg%3E" ); background-position: center; background-size: auto; background-attachment: scroll; background-repeat: repeat; } ...it works with the whole page, but not with a specific section. 😞 Anyone there who can help me???? Edited October 15, 2020 by ebRa Link to comment
Solution ebRa Posted October 15, 2020 Author Solution Share Posted October 15, 2020 (edited) I finally got it: Quote section[data-section-id="5f5e120ccaafb27f44dc1e98"] .section-background { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 278.66 185.57' %3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M517.33,89.82c-.53-4.56-5.72-6.52-7.37-10.55a468.5,468.5,0,0,0-57,1.07c-20-1.77-33.84-1.72-53-2.24-5-.14-10.06.72-15,1.19-5.3.5-10.63.32-15.7.46-9.76.27-18.86,1.57-28.11,1.26.72-.94-.64,0-.73,0-20,3.61-34.54-.66-51.11,1-15.14,1.55-31.15,0-47.1-.08-7.12,5.16-2,10,.83,16.79A560.5,560.5,0,0,0,279,169.4c13.55,22.46,27.2,44,39.84,66.22,1.87,3.29,4.82,6.52,4.81,10.56-2.35,1.94-6.69.88-10.58,1.16-3.56.26-7.77,1.33-11.67,1.53-4.35.22-8.6-.39-11.32.07-3.13.53-7.88,2.45-8.37,4.8-.92,4.43,2.84,7,4.81,9.47,12.41,1.35,21.14-.51,31.76-1.65,2-.21,4.14-.14,6.21-.4,2.69-.35,5.6-1.22,7.66-.78,4.31.94,99.36-4.2,101.12-5,2.87-1.29,9.85-.36,14.6-.45,8.1-.15,17.86-1.74,25.18-2,3.65-.12,7.08.83,10.22-.79,2.39-4.26-.75-9.8-3-13.49-15,.55-25.23,1.65-37.24,1.32-1.06-6.78,5-9.5,5.75-15.74,7.52-9.42,13.23-22.2,19.15-33.34,2.14-4,3.51-8,5.4-12.08,3.27-7,8.29-14.15,11.92-21.25,3.74-7.31,7.17-14.91,10.82-22.34,3.39-6.9,6.57-15.3,10.82-22.34,1.89-3.14,3.56-6.78,5.78-11C514.67,98.08,517.76,93.47,517.33,89.82ZM313.83,204.55l-.06-.1,1.14.24Zm-4-6.9-.36-.63c2.23.64,4.47,1.29,6.72,2Q313,198.3,309.81,197.65Zm-4.29-7.81-.8-1.47q6.85,2.49,13.79,5.21C314.14,192.27,309.82,191,305.52,189.84Zm-5.23-9.25q-.84-1.42-1.7-2.82,11.31,5,22.85,10.68Q310.77,184.24,300.29,180.6Zm-7.08-11.47-3.31-5.18q17.76,9,35.75,20.08Q309.21,175.8,293.21,169.13Zm-9.37-14.72q-2.74-4.36-5.39-8.83a515.19,515.19,0,0,1,51.18,34A503.81,503.81,0,0,0,283.84,154.41Zm-10.91-18.64c-2.26-4.26-4.4-8.66-6.38-13.25a565.11,565.11,0,0,1,67.38,53A510.93,510.93,0,0,0,272.93,135.77Zm-10.08-22.61c-2.5-6.91-6.41-13.18-7.84-20.09,28,21.77,57.47,49.61,84.21,79.37C314.21,149.53,287.95,129.1,262.85,113.16ZM261,90.34c3.73-.48,7.65-.17,11.31-.2q4.11,0,8.18-.13l-.32.71a971.45,971.45,0,0,1,64.24,78.75C318,140,288.86,112.25,261,90.34Zm26.2-.53c4.65-.16,9.31-.37,14-.58l-.13.25c19.07,28.62,35.11,54.1,48.73,77.47A974.86,974.86,0,0,0,287.19,89.82ZM307.73,89c3.73-.16,7.5-.3,11.34-.42l0,0c12.59,25.7,24.89,51.06,36.14,76C341.86,141.68,326.22,116.79,307.73,89Zm17.71-.59c2.89-.06,5.81-.1,8.79-.11h1l3.85,11.08c7.3,21,14.73,42.35,21.72,63.57C349.82,138.41,337.78,113.56,325.44,88.37Zm19.13,8.86-3.16-9.08q4.34-.1,8.75-.25,2.34,10.46,4.68,20.86c4.06,18.05,8,35.64,11.75,52.91C359.51,140.14,352,118.49,344.57,97.22Zm15.94,10.09q-2.2-9.77-4.4-19.6c2.74-.08,5.47-.14,8.17-.18q1.29,11.61,2.57,23.09c1.9,17.06,3.76,33.68,5.51,50C368.59,143.23,364.61,125.51,360.51,107.31Zm12.13,2.5q-1.24-11.08-2.48-22.29,2.59,0,5.13.11c.9,0,1.83,0,2.76,0,.07,24.53.12,48.74.15,72.45C376.42,143.7,374.55,127,372.63,109.81ZM384,160c0-23.62-.09-47.84-.16-72.47,2.59-.1,5.23-.24,7.88-.42q-2,18.79-3.94,37.2C386.52,136.47,385.26,148.35,384,160Zm9.59-35q2-18.92,4-38.25c2.2-.16,4.37-.31,6.48-.44l1.8-.1q-3.33,15.48-6.68,30.76c-3.23,14.78-6.38,29.22-9.39,43.41Q391.7,143,393.62,125ZM405,118.29q3.51-16.08,7-32.4c3-.15,6-.27,9-.35q-3.65,10.89-7.32,21.75c-6,17.81-12.12,35.92-18,53.93C398.66,147.18,401.78,132.9,405,118.29Zm14.19-9.09q4-11.86,8-23.78h.17c3.31,0,6.58-.12,9.83-.23L434.9,90c-11.26,23.88-22.74,48.23-33.45,72.38C407.22,144.61,413.24,126.76,419.16,109.19Zm21-16.61,3.53-7.5-.11-.13c4-.15,7.93-.3,12-.39-15.75,24.77-32.68,52-48.44,79.51C417.67,140.23,429,116.18,440.13,92.58Zm22.14-7.72-.19-.35c3.53,0,7.13.07,10.86.25,1.14.06,2.27.15,3.41.24-18.32,21.48-41.26,49.73-63.56,80.92C428.92,137.77,446.26,110,462.27,84.86Zm20.93,1.09-.24-.53c.46,0,.92,0,1.38,0,6.06-.05,12-.69,17.66.15-28.35,24-57.71,53.11-84.11,83.24C440.94,136.63,464.68,107.54,483.2,85.95ZM448.84,203.77,447,204l1.91-.43Zm3.7-7q-3.38.74-6.79,1.52,3.61-1.14,7.18-2.23Zm4.41-8q-6.66,2-13.41,4.1,7.19-3,14.28-5.66Zm5.31-9.46h0q-10.73,3.95-21.64,8.45,11.77-6.07,23.28-11.37Zm6.3-11.28-.1-.11q-15.61,6.91-31.72,15.26,17.39-11,34.63-20.33Q470,165.47,468.56,168.05Zm7.35-13.9-.19-.2q-21.33,11.08-43,24.86c14.34-11.08,30.28-22.43,47.41-33.14Q478,149.93,475.9,154.15Zm8.76-17.63-.28-.31A587.63,587.63,0,0,0,428,175.13a653.2,653.2,0,0,1,63.71-52.76Q488.14,129.41,484.66,136.53Zm16.13-31.79c-1.34,2.48-2.67,5-4,7.53l-.42-.39a647,647,0,0,0-72.86,59.39c26.35-29.94,55.58-58.83,83.73-82.48C507.19,94.59,503.45,99.84,500.8,104.73Z' %3E%3C/path%3E%3C/svg%3E" ); background-position: center; background-size: auto; background-attachment: scroll; background-repeat: repeat; } Edited October 15, 2020 by ebRa Link to comment
maxspace Posted October 19, 2020 Share Posted October 19, 2020 Hey Ebra, I am having exactly the same issue... Would you mind sharing the step by step instructions to make section specific svg backgrounds? Would appreciate it so so much! Link to comment
tuanphan Posted October 20, 2020 Share Posted October 20, 2020 23 hours ago, maxspace said: Hey Ebra, I am having exactly the same issue... Would you mind sharing the step by step instructions to make section specific svg backgrounds? Would appreciate it so so much! Add above code to Home > Design > Custom CSS How to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en How to convert svg icon to base64 code. https://base64.guru/converter/encode/image/svg ebRa 1 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
ebRa Posted October 20, 2020 Author Share Posted October 20, 2020 Find the ID of the section (Google extensions: Squarespace ID finder) + add the class of the background image (.section-background): section[data-section-id=“yourDataSectionID”] .section-background { } After that, creates svg code. Here you area good tutorial for that: https://css-tricks.com/using-svg/ And once the .svg chart code is generated, we assign it to the "background-image" property in the stylesheet code keys: section[data-section-id=“yourDataSectionID”] .section-background { background-image: url(”data:image/svg+xml;base64,[data]”) } I hope this helps you!!! :) raissaventura 1 Link to comment
maxspace Posted October 21, 2020 Share Posted October 21, 2020 Thanks guys, you are amazing!! ebRa 1 Link to comment
carlyg Posted April 27, 2022 Share Posted April 27, 2022 This is so helpful!! Now what if I don't want the pattern to repeat? Link to comment
tuanphan Posted April 30, 2022 Share Posted April 30, 2022 On 4/27/2022 at 9:35 PM, carlyg said: This is so helpful!! Now what if I don't want the pattern to repeat? use attribute background-repeat: no-repeat; 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
wearequbit Posted September 5, 2022 Share Posted September 5, 2022 On 4/30/2022 at 9:30 AM, tuanphan said: use attribute background-repeat: no-repeat; Hi @ebRa, I didn't locate the section on your website - does the code still work? I substituted my section ID but otherwise kept the rest of the code identical to yours, but no background shows. Any tips you or @tuanphan might have would be gratefully received! Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/5/2022 at 4:18 PM, wearequbit said: Hi @ebRa, I didn't locate the section on your website - does the code still work? I substituted my section ID but otherwise kept the rest of the code identical to yours, but no background shows. Any tips you or @tuanphan might have would be gratefully received! Can you share link to page where you have problem & which exact code did you add? 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
wearequbit Posted September 6, 2022 Share Posted September 6, 2022 1 hour ago, tuanphan said: Can you share link to page where you have problem & which exact code did you add? Well, that's strange - just created a new site and - BOOM - it worked. 🤔 It's lengthy code so the custom CSS section would quickly become pretty chaotic. I don't think it's possible under a trial, but if I uploaded an SVG file so it had this url (https://kazoo-tunny-bb76.squarespace.com/s/test.svg), is there a way for the section background to use this url instead? // code used: section[data-section-id="63175ad1f78caa7c9747b03d"] .section-background { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 278.66 185.57' %3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M517.33,89.82c-.53-4.56-5.72-6.52-7.37-10.55a468.5,468.5,0,0,0-57,1.07c-20-1.77-33.84-1.72-53-2.24-5-.14-10.06.72-15,1.19-5.3.5-10.63.32-15.7.46-9.76.27-18.86,1.57-28.11,1.26.72-.94-.64,0-.73,0-20,3.61-34.54-.66-51.11,1-15.14,1.55-31.15,0-47.1-.08-7.12,5.16-2,10,.83,16.79A560.5,560.5,0,0,0,279,169.4c13.55,22.46,27.2,44,39.84,66.22,1.87,3.29,4.82,6.52,4.81,10.56-2.35,1.94-6.69.88-10.58,1.16-3.56.26-7.77,1.33-11.67,1.53-4.35.22-8.6-.39-11.32.07-3.13.53-7.88,2.45-8.37,4.8-.92,4.43,2.84,7,4.81,9.47,12.41,1.35,21.14-.51,31.76-1.65,2-.21,4.14-.14,6.21-.4,2.69-.35,5.6-1.22,7.66-.78,4.31.94,99.36-4.2,101.12-5,2.87-1.29,9.85-.36,14.6-.45,8.1-.15,17.86-1.74,25.18-2,3.65-.12,7.08.83,10.22-.79,2.39-4.26-.75-9.8-3-13.49-15,.55-25.23,1.65-37.24,1.32-1.06-6.78,5-9.5,5.75-15.74,7.52-9.42,13.23-22.2,19.15-33.34,2.14-4,3.51-8,5.4-12.08,3.27-7,8.29-14.15,11.92-21.25,3.74-7.31,7.17-14.91,10.82-22.34,3.39-6.9,6.57-15.3,10.82-22.34,1.89-3.14,3.56-6.78,5.78-11C514.67,98.08,517.76,93.47,517.33,89.82ZM313.83,204.55l-.06-.1,1.14.24Zm-4-6.9-.36-.63c2.23.64,4.47,1.29,6.72,2Q313,198.3,309.81,197.65Zm-4.29-7.81-.8-1.47q6.85,2.49,13.79,5.21C314.14,192.27,309.82,191,305.52,189.84Zm-5.23-9.25q-.84-1.42-1.7-2.82,11.31,5,22.85,10.68Q310.77,184.24,300.29,180.6Zm-7.08-11.47-3.31-5.18q17.76,9,35.75,20.08Q309.21,175.8,293.21,169.13Zm-9.37-14.72q-2.74-4.36-5.39-8.83a515.19,515.19,0,0,1,51.18,34A503.81,503.81,0,0,0,283.84,154.41Zm-10.91-18.64c-2.26-4.26-4.4-8.66-6.38-13.25a565.11,565.11,0,0,1,67.38,53A510.93,510.93,0,0,0,272.93,135.77Zm-10.08-22.61c-2.5-6.91-6.41-13.18-7.84-20.09,28,21.77,57.47,49.61,84.21,79.37C314.21,149.53,287.95,129.1,262.85,113.16ZM261,90.34c3.73-.48,7.65-.17,11.31-.2q4.11,0,8.18-.13l-.32.71a971.45,971.45,0,0,1,64.24,78.75C318,140,288.86,112.25,261,90.34Zm26.2-.53c4.65-.16,9.31-.37,14-.58l-.13.25c19.07,28.62,35.11,54.1,48.73,77.47A974.86,974.86,0,0,0,287.19,89.82ZM307.73,89c3.73-.16,7.5-.3,11.34-.42l0,0c12.59,25.7,24.89,51.06,36.14,76C341.86,141.68,326.22,116.79,307.73,89Zm17.71-.59c2.89-.06,5.81-.1,8.79-.11h1l3.85,11.08c7.3,21,14.73,42.35,21.72,63.57C349.82,138.41,337.78,113.56,325.44,88.37Zm19.13,8.86-3.16-9.08q4.34-.1,8.75-.25,2.34,10.46,4.68,20.86c4.06,18.05,8,35.64,11.75,52.91C359.51,140.14,352,118.49,344.57,97.22Zm15.94,10.09q-2.2-9.77-4.4-19.6c2.74-.08,5.47-.14,8.17-.18q1.29,11.61,2.57,23.09c1.9,17.06,3.76,33.68,5.51,50C368.59,143.23,364.61,125.51,360.51,107.31Zm12.13,2.5q-1.24-11.08-2.48-22.29,2.59,0,5.13.11c.9,0,1.83,0,2.76,0,.07,24.53.12,48.74.15,72.45C376.42,143.7,374.55,127,372.63,109.81ZM384,160c0-23.62-.09-47.84-.16-72.47,2.59-.1,5.23-.24,7.88-.42q-2,18.79-3.94,37.2C386.52,136.47,385.26,148.35,384,160Zm9.59-35q2-18.92,4-38.25c2.2-.16,4.37-.31,6.48-.44l1.8-.1q-3.33,15.48-6.68,30.76c-3.23,14.78-6.38,29.22-9.39,43.41Q391.7,143,393.62,125ZM405,118.29q3.51-16.08,7-32.4c3-.15,6-.27,9-.35q-3.65,10.89-7.32,21.75c-6,17.81-12.12,35.92-18,53.93C398.66,147.18,401.78,132.9,405,118.29Zm14.19-9.09q4-11.86,8-23.78h.17c3.31,0,6.58-.12,9.83-.23L434.9,90c-11.26,23.88-22.74,48.23-33.45,72.38C407.22,144.61,413.24,126.76,419.16,109.19Zm21-16.61,3.53-7.5-.11-.13c4-.15,7.93-.3,12-.39-15.75,24.77-32.68,52-48.44,79.51C417.67,140.23,429,116.18,440.13,92.58Zm22.14-7.72-.19-.35c3.53,0,7.13.07,10.86.25,1.14.06,2.27.15,3.41.24-18.32,21.48-41.26,49.73-63.56,80.92C428.92,137.77,446.26,110,462.27,84.86Zm20.93,1.09-.24-.53c.46,0,.92,0,1.38,0,6.06-.05,12-.69,17.66.15-28.35,24-57.71,53.11-84.11,83.24C440.94,136.63,464.68,107.54,483.2,85.95ZM448.84,203.77,447,204l1.91-.43Zm3.7-7q-3.38.74-6.79,1.52,3.61-1.14,7.18-2.23Zm4.41-8q-6.66,2-13.41,4.1,7.19-3,14.28-5.66Zm5.31-9.46h0q-10.73,3.95-21.64,8.45,11.77-6.07,23.28-11.37Zm6.3-11.28-.1-.11q-15.61,6.91-31.72,15.26,17.39-11,34.63-20.33Q470,165.47,468.56,168.05Zm7.35-13.9-.19-.2q-21.33,11.08-43,24.86c14.34-11.08,30.28-22.43,47.41-33.14Q478,149.93,475.9,154.15Zm8.76-17.63-.28-.31A587.63,587.63,0,0,0,428,175.13a653.2,653.2,0,0,1,63.71-52.76Q488.14,129.41,484.66,136.53Zm16.13-31.79c-1.34,2.48-2.67,5-4,7.53l-.42-.39a647,647,0,0,0-72.86,59.39c26.35-29.94,55.58-58.83,83.73-82.48C507.19,94.59,503.45,99.84,500.8,104.73Z' %3E%3C/path%3E%3C/svg%3E" ); background-position: center; background-size: auto; background-attachment: scroll; background-repeat: repeat; } Link to comment
tuanphan Posted September 8, 2022 Share Posted September 8, 2022 On 9/6/2022 at 10:09 PM, wearequbit said: Well, that's strange - just created a new site and - BOOM - it worked. 🤔 It's lengthy code so the custom CSS section would quickly become pretty chaotic. I don't think it's possible under a trial, but if I uploaded an SVG file so it had this url (https://kazoo-tunny-bb76.squarespace.com/s/test.svg), is there a way for the section background to use this url instead? // code used: section[data-section-id="63175ad1f78caa7c9747b03d"] .section-background { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 278.66 185.57' %3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M517.33,89.82c-.53-4.56-5.72-6.52-7.37-10.55a468.5,468.5,0,0,0-57,1.07c-20-1.77-33.84-1.72-53-2.24-5-.14-10.06.72-15,1.19-5.3.5-10.63.32-15.7.46-9.76.27-18.86,1.57-28.11,1.26.72-.94-.64,0-.73,0-20,3.61-34.54-.66-51.11,1-15.14,1.55-31.15,0-47.1-.08-7.12,5.16-2,10,.83,16.79A560.5,560.5,0,0,0,279,169.4c13.55,22.46,27.2,44,39.84,66.22,1.87,3.29,4.82,6.52,4.81,10.56-2.35,1.94-6.69.88-10.58,1.16-3.56.26-7.77,1.33-11.67,1.53-4.35.22-8.6-.39-11.32.07-3.13.53-7.88,2.45-8.37,4.8-.92,4.43,2.84,7,4.81,9.47,12.41,1.35,21.14-.51,31.76-1.65,2-.21,4.14-.14,6.21-.4,2.69-.35,5.6-1.22,7.66-.78,4.31.94,99.36-4.2,101.12-5,2.87-1.29,9.85-.36,14.6-.45,8.1-.15,17.86-1.74,25.18-2,3.65-.12,7.08.83,10.22-.79,2.39-4.26-.75-9.8-3-13.49-15,.55-25.23,1.65-37.24,1.32-1.06-6.78,5-9.5,5.75-15.74,7.52-9.42,13.23-22.2,19.15-33.34,2.14-4,3.51-8,5.4-12.08,3.27-7,8.29-14.15,11.92-21.25,3.74-7.31,7.17-14.91,10.82-22.34,3.39-6.9,6.57-15.3,10.82-22.34,1.89-3.14,3.56-6.78,5.78-11C514.67,98.08,517.76,93.47,517.33,89.82ZM313.83,204.55l-.06-.1,1.14.24Zm-4-6.9-.36-.63c2.23.64,4.47,1.29,6.72,2Q313,198.3,309.81,197.65Zm-4.29-7.81-.8-1.47q6.85,2.49,13.79,5.21C314.14,192.27,309.82,191,305.52,189.84Zm-5.23-9.25q-.84-1.42-1.7-2.82,11.31,5,22.85,10.68Q310.77,184.24,300.29,180.6Zm-7.08-11.47-3.31-5.18q17.76,9,35.75,20.08Q309.21,175.8,293.21,169.13Zm-9.37-14.72q-2.74-4.36-5.39-8.83a515.19,515.19,0,0,1,51.18,34A503.81,503.81,0,0,0,283.84,154.41Zm-10.91-18.64c-2.26-4.26-4.4-8.66-6.38-13.25a565.11,565.11,0,0,1,67.38,53A510.93,510.93,0,0,0,272.93,135.77Zm-10.08-22.61c-2.5-6.91-6.41-13.18-7.84-20.09,28,21.77,57.47,49.61,84.21,79.37C314.21,149.53,287.95,129.1,262.85,113.16ZM261,90.34c3.73-.48,7.65-.17,11.31-.2q4.11,0,8.18-.13l-.32.71a971.45,971.45,0,0,1,64.24,78.75C318,140,288.86,112.25,261,90.34Zm26.2-.53c4.65-.16,9.31-.37,14-.58l-.13.25c19.07,28.62,35.11,54.1,48.73,77.47A974.86,974.86,0,0,0,287.19,89.82ZM307.73,89c3.73-.16,7.5-.3,11.34-.42l0,0c12.59,25.7,24.89,51.06,36.14,76C341.86,141.68,326.22,116.79,307.73,89Zm17.71-.59c2.89-.06,5.81-.1,8.79-.11h1l3.85,11.08c7.3,21,14.73,42.35,21.72,63.57C349.82,138.41,337.78,113.56,325.44,88.37Zm19.13,8.86-3.16-9.08q4.34-.1,8.75-.25,2.34,10.46,4.68,20.86c4.06,18.05,8,35.64,11.75,52.91C359.51,140.14,352,118.49,344.57,97.22Zm15.94,10.09q-2.2-9.77-4.4-19.6c2.74-.08,5.47-.14,8.17-.18q1.29,11.61,2.57,23.09c1.9,17.06,3.76,33.68,5.51,50C368.59,143.23,364.61,125.51,360.51,107.31Zm12.13,2.5q-1.24-11.08-2.48-22.29,2.59,0,5.13.11c.9,0,1.83,0,2.76,0,.07,24.53.12,48.74.15,72.45C376.42,143.7,374.55,127,372.63,109.81ZM384,160c0-23.62-.09-47.84-.16-72.47,2.59-.1,5.23-.24,7.88-.42q-2,18.79-3.94,37.2C386.52,136.47,385.26,148.35,384,160Zm9.59-35q2-18.92,4-38.25c2.2-.16,4.37-.31,6.48-.44l1.8-.1q-3.33,15.48-6.68,30.76c-3.23,14.78-6.38,29.22-9.39,43.41Q391.7,143,393.62,125ZM405,118.29q3.51-16.08,7-32.4c3-.15,6-.27,9-.35q-3.65,10.89-7.32,21.75c-6,17.81-12.12,35.92-18,53.93C398.66,147.18,401.78,132.9,405,118.29Zm14.19-9.09q4-11.86,8-23.78h.17c3.31,0,6.58-.12,9.83-.23L434.9,90c-11.26,23.88-22.74,48.23-33.45,72.38C407.22,144.61,413.24,126.76,419.16,109.19Zm21-16.61,3.53-7.5-.11-.13c4-.15,7.93-.3,12-.39-15.75,24.77-32.68,52-48.44,79.51C417.67,140.23,429,116.18,440.13,92.58Zm22.14-7.72-.19-.35c3.53,0,7.13.07,10.86.25,1.14.06,2.27.15,3.41.24-18.32,21.48-41.26,49.73-63.56,80.92C428.92,137.77,446.26,110,462.27,84.86Zm20.93,1.09-.24-.53c.46,0,.92,0,1.38,0,6.06-.05,12-.69,17.66.15-28.35,24-57.71,53.11-84.11,83.24C440.94,136.63,464.68,107.54,483.2,85.95ZM448.84,203.77,447,204l1.91-.43Zm3.7-7q-3.38.74-6.79,1.52,3.61-1.14,7.18-2.23Zm4.41-8q-6.66,2-13.41,4.1,7.19-3,14.28-5.66Zm5.31-9.46h0q-10.73,3.95-21.64,8.45,11.77-6.07,23.28-11.37Zm6.3-11.28-.1-.11q-15.61,6.91-31.72,15.26,17.39-11,34.63-20.33Q470,165.47,468.56,168.05Zm7.35-13.9-.19-.2q-21.33,11.08-43,24.86c14.34-11.08,30.28-22.43,47.41-33.14Q478,149.93,475.9,154.15Zm8.76-17.63-.28-.31A587.63,587.63,0,0,0,428,175.13a653.2,653.2,0,0,1,63.71-52.76Q488.14,129.41,484.66,136.53Zm16.13-31.79c-1.34,2.48-2.67,5-4,7.53l-.42-.39a647,647,0,0,0-72.86,59.39c26.35-29.94,55.58-58.83,83.73-82.48C507.19,94.59,503.45,99.84,500.8,104.73Z' %3E%3C/path%3E%3C/svg%3E" ); background-position: center; background-size: auto; background-attachment: scroll; background-repeat: repeat; } Use section[data-section-id="63175ad1f78caa7c9747b03d"] .section-background img { content: url(https://kazoo-tunny-bb76.squarespace.com/s/test.svg); } Sometime uploaded files won't work on Trial Plan 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
wearequbit Posted September 10, 2022 Share Posted September 10, 2022 On 9/8/2022 at 1:15 PM, tuanphan said: Use section[data-section-id="63175ad1f78caa7c9747b03d"] .section-background img { content: url(https://kazoo-tunny-bb76.squarespace.com/s/test.svg); } Sometime uploaded files won't work on Trial Plan Hmmmm... no joy I'm afraid. I've uploaded the same SVG to a paid account while testing and tried both of these: section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background img { content: url(https://qubitcreations.io/s/test.svg); } AND section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background img { content: url(https://static1.squarespace.com/static/5fdb7da1e9dbd944f59586fc/t/63151af986d354370e0c0b60/1662327546464/test.svg); } Do you see anything amiss? https://qubitcreations.io/test tuanphan Link to comment
tuanphan Posted September 11, 2022 Share Posted September 11, 2022 20 hours ago, wearequbit said: Hmmmm... no joy I'm afraid. I've uploaded the same SVG to a paid account while testing and tried both of these: section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background img { content: url(https://qubitcreations.io/s/test.svg); } AND section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background img { content: url(https://static1.squarespace.com/static/5fdb7da1e9dbd944f59586fc/t/63151af986d354370e0c0b60/1662327546464/test.svg); } Do you see anything amiss?https://qubitcreations.io/test tuanphan Use this new code section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background { background-image: url(https://static1.squarespace.com/static/5fdb7da1e9dbd944f59586fc/t/63151af986d354370e0c0b60/1662327546464/test.svg) !important; background-size: cover; background-repeat: no-repeat; } 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
wearequbit Posted September 11, 2022 Share Posted September 11, 2022 8 hours ago, tuanphan said: Use this new code section[data-section-id="631c69f1fdbd2e57f012701b"] .section-background { background-image: url(https://static1.squarespace.com/static/5fdb7da1e9dbd944f59586fc/t/63151af986d354370e0c0b60/1662327546464/test.svg) !important; background-size: cover; background-repeat: no-repeat; } @tuanphan - you, sir, are HERO! tuanphan 1 Link to comment
brandonhendrickson Posted September 29, 2022 Share Posted September 29, 2022 Holy crap, this worked for me too! (I know that shouldn't be surprising, but I'm not very good at this, and I was trying to bring in an SVG from a different site — HeroPatterns.com? And I really didn't think it would go well.) Here's mine: section[data-section-id="6335a2837b42dc14fa98c077"] .section-background { background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23e2a47d' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");} tuanphan 1 Run a test-prep company, and a group where little kids get together to make brunch and talk philosophy. Starting a school. Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 17 hours ago, brandonhendrickson said: Holy crap, this worked for me too! (I know that shouldn't be surprising, but I'm not very good at this, and I was trying to bring in an SVG from a different site — HeroPatterns.com? And I really didn't think it would go well.) Here's mine: section[data-section-id="6335a2837b42dc14fa98c077"] .section-background { background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23e2a47d' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");} Did you solve? or still need help? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment