.svg section-background v.7.1

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

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