GatsbyJS - Using SVGs as pseudo background image in CSS

Question

This is something I have been toying around with for a little while but am now at a point in the project I am working in Gatsby where I need a little advice.

I am trying to use SVG's as pseudo background images, but having no avail so far.

SCSS code:

 &:after {
    display: block;
    content: "";
    position: absolute;
    background-image: url(../../static/square-hollow-yellow.svg);
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
  }

What is returned when looking up the background image source within inspector.

url(data:image/svg+xml;base64,Ym9vawAAAABtYXJrAAAAADgAAAA4AAAAsAMAAAAABBAAAAAAVkcAABAHH+wVMcJBAAAAAP9/AADcAgAABAAAAAMDAAAABAAADAAAAAEBAABBcHBsaWNhdGlvbnMEAAAAAQEAAE1BTVAGAAAAAQEAAGh0ZG9jcwAACAAAAAEBAABhbmdlbC12MgoAAAABAQAAd3AtY29udGVudAAABgAAAAEBAAB0aGVtZXMAABQAAAABAQAAYW5nZWwtc3RhcnRlci1tYXN0ZXIGAAAAAQEAAGFzc2V0cwAABAAAAAEBAABzdmdzGAAAAAEBAABzcXVhcmUtaG9sbG93LXllbGxvdy5zdmcoAAAAAQYAABAAAAAkAAAAMAAAAEAAAABQAAAAZAAAAHQAAACQAAAAoAAAAKwAAAAIAAAABAMAAJ4xhQEDAAAACAAAAAQDAAD6RkABAwAAAAgAAAAEAwAAiEw3AAMAAAAIAAAABAMAACAHJQEDAAAACAAAAAQDAAArByUBAwAAAAgAAAAEAwAALAclAQMAAAAIAAAABAMAAOIZJQEDAAAACAAAAAQDAACO/qEBAwAAAAgAAAAEAwAAUgmiAQMAAAAIAAAABAMAAHAJogEDAAAAKAAAAAEGAAD8AAAADAEAABwBAAAsAQAAPAEAAEwBAABcAQAAbAEAAHwBAACMAQAACAAAAAAEAABBwg04Y7pOQRgAAAABAgAAAQAAAAAAAAAfAgAAAAAAAB8CAAAAAAAAAAAAAAEFAAAIAAAAAQkAAGZpbGU6Ly8vDAAAAAEBAABNYWNpbnRvc2ggSEQIAAAABAMAAACwYG50AAAACAAAAAAEAABBwb7mH7hbnSQAAAABAQAAQkQ3NDhGNkItMkM2NC0zOTZELUJENjMtRTcwNDRCMEM3MTZGGAAAAAECAACBAAAAAQAAAO8TAAABAAAA7xMAAAEAAAABAAAAAQEAAC8AAAAzAAAAAQIAAGRuaWIAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAHN2Zz8/Pz8AAAAAAAAAAADMAAAA/v///wEAAAAAAAAAEAAAAAQQAADMAAAAAAAAAAUQAACcAQAAAAAAABAQAADcAQAAAAAAAEAQAADMAQAAAAAAAAIgAACUAgAAAAAAAAUgAAAEAgAAAAAAABAgAAAUAgAAAAAAABEgAABIAgAAAAAAABIgAAAoAgAAAAAAABMgAAA4AgAAAAAAACAgAAB0AgAAAAAAADAgAAD8AQAAAAAAAAHQAAD8AQAAAAAAABDQAAAEAAAAAAAAABfwAACsAAAAAAAAACLwAACgAgAAAAAAAA==)

Any pointers or advice would be greatly appreciated.

UPDATE

Folder structure of 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)

Answer 1

Probably the background image just is not in the visible area of your containers. It is hard to tell with the provided snippet only. Escpecially since the ::after is positioned absolutely.

 div{ background-color: red; height: 200px; position: relative; width: 200px } div::after{ background-color: lime; display: block; content: ""; position: absolute; background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg"); width: 150px; height: 150px; bottom: -5%; right: 50px; background-position: 50% 50% }

 <div></div>

Also note that you can use background-size and background-position to place the background. You do not require the ::after just for that.

 div{ height: 200px; position: relative; width: 200px; background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg"); background-repeat: no-repeat; background-size: 100% }.div1{ background-color: green; }.div2{ background-color: lime; background-size: 150px; background-position: -50px -5%; background-repeat: no-repeat }

 <div class = "div1"></div> <div class = "div2"></div>

Answer 2

Another workaround is using gatsby-plugin-react-svg . It's really easy to use customize. You only need to take care of a few things and you can easily achieve what you want. In your gatsby-config.js:

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ 
      }
    }
  }
]

Keep in mind that /assets/ is just a regular expression, not a path itself. If you want to use another folder (ie: /svg/ ), you will need to set it like include: /svg/ . No matter how deep is your folder.

Another thing to take into account is to have only SVG inside that folder and they must have a different id (usually exported SVG has a standard id and if they are repeated you will have troubles importing SVGs).

Once you have your set up ready, just import the SVG as a React component:

import Icon from "./path/assets/icon.svg"; // other code

return <div>
    <Icon className="myIcon" />
</div>;

You can now target the SVG and style it as you wish. If it's inside a position: relative container, you can easily apply the styles of the ::after pseudoselector you've provided.