.svg section-background v.7.1

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????

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!

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

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!!! :)

Thanks guys, you are amazing!!

This is so helpful!! Now what if I don't want the pattern to repeat? 

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;

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!

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?

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

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

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

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

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!

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");}

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?