[Resolved] svg background footer widget area

[Schuyler]

hi there, i’d like to use an svg background from heropatterns.com. They give you the css for it: `background-color: #ffffff;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 80 80′ width=’80’ height=’80’%3E%3Cpath fill=’%23668abe’ fill-opacity=’0.04′ d=’M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z’%3E%3C/path%3E%3C/svg%3E”);`

as well as let you download an unstyled svg. What is the best way to get this into the background of the footer widget area? thanks so much!

[Leo]

Hi there,

Try the CSS method:

.footer-widgets {
    /*CSS here*/
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Schuyler]

thanks. Right now it appears like this: http://www.tutoringservicesseattle.com/nanny/

but I’m hoping there would be a bunch of these anchors (is repeating the right word?) and would look like this: (scroll down to ‘anchors away’) http://www.heropatterns.com/

[Leo]

Might actually be easier to generate the image and add in as background image using the customizer: https://docs.generatepress.com/article/backgrounds-overview/

[Schuyler]

thanks. i added the svg as the background image and left the css. it worked

[Leo]

No problem!

[Author]

Posts