I've been experimenting with something for a while now, and I need some advice on a project I'm working on in Gatsby.
I'm attempting to use SVGs as pseudo background images, but so far it's not working for me.
Here is the SCSS code snippet I'm using:
&:after {
display: block;
content: "";
position: absolute;
background-image: url(../../static/square-hollow-yellow.svg);
width: 150px;
height: 150px;
bottom: -5%;
right: 50px;
}
When checking the source of the background image in the inspector, this is what I see:
url(data:image/svg+xml;base64,Ym9vawAAAABtYXJrAAAAADgAAAA4AAAAsAMAAAAABBAAAAAAVkcAABAHH+wVMcJBAAAAAP9/AADcAgAABAAAAAMDAAAABAAADAAAAAEBAABBcHBsaWNhdGlvbnMEAAAAAQEAAE1BTVAGAAAAAQEAAGh0ZG9jcwAACAAAAAEBAABhbmdlbC12MgoAAAABAQAAd3AtY29udGVudAAABgAAAAEBAAB0aGVtZXMAABQAAAABAQAAYW5nZWwtc3RhcnRlci1tYXN0ZXIGAAAAAQEAAGFzc2V0cwAABAAAAAEBAABzdmdzGAAAAAEBAABzcXVhcmUtaG9sbG93LXllbGxvdy5zdmcoAAAAAQYAABAAAAAkAAAAMAAAAEAAAABQAAAAZAAAAHQAAACQAAAAoAAAAKwAAAAIAAAABAMAAJ4xhQEDAAAACAAAAAQDAAD6RkABAwAAAAgAAAAEAwAAiEw3AAMAAAAIAAAABAMAACAHJQEDAAAACAAAAAQDAAArByUBAwAAAAgAAAAEAwAALAclAQMAAAAIAAAABAMAAOIZJQEDAAAACAAAAAQDAACO/qEBAwAAAAgAAAAEAwAAUgmiAQMAAAAIAAAABAMAAHAJogEDAAAAKAAAAAEGAAD8AAAADAEAABwBAAAsAQAAPAEAAEwBAABcAQAAbAEAAHwBAACMAQAACAAAAAAEAABBwg04Y7pOQRgAAAABAgAAAQAAAAAAAAAfAgAAAAAAAB8CA...
If anyone has any tips or advice on how to make this work, I would really appreciate it.
UPDATE
This is the folder structure of my project:
- src
- components
- Heros
- hero-square.js (file of component)
- sass
- main.scss (stylesheet)
- static
- sqaure-hollow-yellow.svg (svg file)
- templates
- angel-in-action-single.js (where the component is being rendered/called)