Archived topic
svg background footer widget area
5 replies · Started by Schuyler on February 14, 2018
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!
Hi there,
Try the CSS method:
.footer-widgets {
/*CSS here*/
}Adding CSS: https://docs.generatepress.com/article/adding-css/
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/
Might actually be easier to generate the image and add in as background image using the customizer: https://docs.generatepress.com/article/backgrounds-overview/
thanks. i added the svg as the background image and left the css. it worked
No problem!
