Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

.svg section-background v.7.1


ebRa
Go to solution Solved by ebRa,

Question

Site URL: https://sealion-dogfish-x6kw.squarespace.com/

Hello everyone!

Site is still on trial:

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 by ebRa
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Thanks guys, you are amazing!!

5 answers to this question

Recommended Posts

  • 0

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 by ebRa
Link to post
  • 0

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 post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...