GatsbyJS - Leveraging SVGs for Creative Background Effects in CSS

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)

Answer №1

It appears that the background image may not be visible within your containers due to positioning issues. Without further context, it is difficult to pinpoint the exact problem, especially considering the absolute positioning of ::after.

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>

Remember, you can utilize background-size and background-position properties to adjust the background without necessarily using ::after.

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

If you're looking for a workaround, consider utilizing gatsby-plugin-react-svg. This tool is user-friendly and customizable, requiring just a few adjustments to achieve your desired outcome. In your gatsby-config.js file:

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

Remember that /assets/ functions as a regular expression, not an actual path. If you prefer using another folder (e.g., /svg/), be sure to specify it as include: /svg/, regardless of its nesting level.

Additionally, ensure that the designated folder contains only distinct SVG files with unique IDs. Duplicated IDs may lead to issues when importing SVGs.

Once your setup is complete, import the SVG as a React component:

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

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

You can then style the imported SVG according to your preferences. If it resides within a container styled with position: relative, you can easily apply styles using the ::after pseudo-element you've defined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Retrieving the token using Vue Cookies method returns a null value

My development project involves the use of vuex, axios, vue-cookies, and JWTs. I have a specific file named api.js that is imported into the main Vue JS file. Below is the code snippet from api.js: import axios from 'axios' import Vue from ' ...

Avoiding mistakes in class and id names with preventative tools

Is there a simple way to spot typos in HTML/CSS/JavaScript code? I'm looking for basic debugging tools that can catch mistakes like "#fron" instead of "#from" in class names and ids. I'm aware of more advanced IDEs, but I'm curious if there ...

Tips for creating precise dots on a polished slideshow

Is it possible to change the buttons on my slideshow to actual dots instead of numbers? I tried following the instructions I found online, but the code doesn't seem to be working. Can anyone provide guidance on how to achieve this? My website is still ...

Updating configuration file for Next.js

Typically, Next.js relies on the next.config.js file for configuration settings. Is it possible to modify this to use a different file name such as my.next.config.js? ...

Optimal method for detecting changes in a React webpage

As I create React hook components that utilize Material-UI input controls, I have searched extensively but have not found a satisfactory example. My goal is to display a popup message to the user if they have made changes to an input field, checkbox, rad ...

Automatically install peer dependencies in the client-side library

Currently, I am working on a React package/library that I have bundled using Rollup. Within this package, there are various components that will be utilized in an Angular application. To manage the dependencies, I have defined certain packages as peerDepe ...

Is it feasible to reference an element within style={} in ReactJS?

Can the button itself be referenced when specifying the style? style={this.current.disabled == true ? {... <button ref={createRef} type='submit' ...

I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties

Within the structure of a Vue component's template, I have the following code: <td> <select id="papel" @change="intervChange(row)"> <option value="Apreciador">Apreciar</option> <option value="Assessor">Assessor ...

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Hey there fellow developers! I'm currently working on a simple Angular app that allows users to upload images to a gallery. However, I've encountered an issue while trying to upload the images to Firebase Storage. I keep getting an error mentioni ...

Reduce the amount of code in conditional statements

Is there a way to streamline the following code- <div className="App"> <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox> { parameter1.country && parameter1.category ? < ...

"Ensuring that every" within handlebars js

I have been exploring handlebars.js (hbs) and although I haven't mastered it yet, I am curious to know if there is an equivalent to the following code: {{#if all source}} If not, how can I create a similar functionality using handlebars.js? ...

What could be the issue with my injection supplier?

When running the following code, the configuration works fine, but an error is returned: Uncaught Error: [$injector:unpr] Unknown provider: AngularyticsConsoleHandlerProvider <- AngularyticsConsoleHandler <- Angularytics Code snippet: angular.modu ...

The data in Node AngularJS is not loading upon the page's initial load

When I log in, I am redirected to a different page where a partial page is loaded using an AngularJS route. By clicking on any anchor tag, the respective partial view is displayed. However, I encountered an issue. Upon logging in, I use res.render(pagenam ...

Setting up React Context API with TypeScript: A Step-by-Step Guide

I recently updated my app.js file to app.tsx for improved functionality. However, I encountered an error with the current value. app.tsx import React, { createContext, useState } from "react"; import SelectPage from "./pages/select/select& ...

Selecting multiple options with a default value in Material UI Autocomplete

I am facing an issue with my Material UI Autocomplete component that allows for multiple selection and requires default values. The problem lies with the checkbox selection. Even though the names appear in the text field, they are not selected as values. ...

Convert the image presentation to be inline

I am currently working on an image slider and I'm having issues with displaying the images inline. I have applied CSS but unfortunately, it's not working as expected. The images are not being displayed inline. Can someone please advise on what pr ...

Autocomplete Feature in MUI Not Providing Filtered Results

When I input a partial string into the text field, the options in the dropdown menu are not being filtered correctly. For example, if I type '112', it should only display values that include '112' but instead, it shows all options. < ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

Can you explain the function of the * CSS operator? Are there any additional CSS operators that serve similar purposes?

While researching how to create a nested table using list elements in CSS, I came across this interesting page: . Upon examining the stylesheet, I noticed unfamiliar symbols being used that appear to be CSS operators, such as the > and * symbols. For ...

Guide on using POST method in jQuery version 1.11.4 for tab functionality

I'm currently in the process of upgrading from jquery ui version 1.9.2 to jquery ui version 1.11.4 and I've encountered a situation where ajaxOptions has been removed from the tabs control. Originally, I was using the following code: $("#tabs"). ...