Jump to content

ebRa

Member
  • Posts

    9
  • Joined

  • Last visited

Posts posted by ebRa

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

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

     

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.