如何使用react在后台添加svg图像？

Question

I am trying to add SVG as a background image in this login page(code and preview below). But I don't know how to do that all I know is <img src="background.svg" class="yourCSSClass"> But this adds the SVG above my text whereas I want it behind my text. How do I do that? Here I am sending my react code and SVG file

Here is the App.js `

import React, { Component } from 'react';
    import './App.css';
    import NameForm from './Form';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="Heading">
    <h1>Welcome to the Sudistic</h1>
    <h3>A small to contribution to the programming community.</h3>
            </div>
            <div>
              <h4>Log In to your Account</h4>
            </div>
            <div>
              <NameForm />
            </div>

          </div>

        );
      }
    }

    export default App;

Here is the App.css

    .App {
  text-align: center;
  margin-top: 170px;
}

 h1 {
  color: rgb(98, 8, 182);
  font-size: 5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.274);
}

h3 {
  color: rgb(70, 70, 70);
  margin-top: -30px;
}

h4 {
  color: rgb(63, 109, 247);
  font-size: 1.5rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.274);
}
`

Here is the Form.js

    import React from 'react';

import './form.css';


export default class NameForm extends React.Component {


    render() {
      return (
        <div className="container">
        <div className="email">
        <form>
          <label>
           <input type="email" placeholder="Enter your email" />
          </label>
          </form>
          </div>
          <div className="password">
              <form>
              <label>
           <input type="password" placeholder="Passowrd" />
          </label>
              </form>
          </div>
          <div className="btn">
              <input type="submit" value="Login" />
          </div>
          <h5>Don't have an account?<a href='/'>Register now</a></h5>
        </div>
      );
    }
  }

Here is the form.css

 .container {
    margin: 2rem 0rem;
}

.email { 
    margin-top: 1rem;

}

.email input {
    width: 250px;
    font-size: 16px;
}

.password {
    margin-top: 1rem;
}

.password input {
    width: 250px;
    font-size: 16px;
    text-align: left;
}

.btn {
    margin-top: 1rem;
}

.btn input {
    width: 255px;
    background-color: blueviolet;
    color: aliceblue;
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.61);
}
.btn input:hover {
    background-color: red;
}

   h5 a:hover { 
        color: rgb(63, 109, 247);
    }

And This is my background SVG

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2205.482 1074.229">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }

      .cls-2, .cls-3 {
        fill: #fff;
      }

      .cls-3 {
        opacity: 0.1;
      }
    </style>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#38e870"/>
      <stop offset="1" stop-color="#b8d3c1"/>
    </linearGradient>
  </defs>
  <g id="background" transform="translate(406.74)">
    <rect id="Rectangle" class="cls-1" width="1440" height="1024"/>
    <g id="Group_7" data-name="Group 7">
      <path id="Path_2" data-name="Path 2" class="cls-2" d="M16.434,89.884S165.309-.9,292.055,89.442s263.46-2.409,263.46-2.409,218.275-191.988,429.309-5.67,347.458-7.4,347.458-7.4,149.887-122.7,344.608-4.262,10.5-1.535,10.5-1.535V289.655H0Z" transform="translate(-76.54 777.598)"/>
      <path id="Path_2_Copy" data-name="Path 2 Copy" class="cls-3" d="M1953.62,115.161S1787.41-1.154,1645.9,114.6s-294.148-3.086-294.148-3.086-243.7-245.979-479.313-7.266S484.51,94.76,484.51,94.76,317.16-62.453,99.758,89.294s-11.719-1.967-11.719-1.967V371.111H1971.97" transform="translate(-173.23 703.118)"/>
      <path id="Path_2_Copy_2" data-name="Path 2 Copy 2" class="cls-3" d="M20.52,136.446s185.9-137.813,344.165-.671,328.979-3.656,328.979-3.656,272.556-291.441,536.071-8.609S1663.6,112.268,1663.6,112.268,1850.76-74,2093.91,105.8s13.107-2.33,13.107-2.33V439.7H0Z" transform="translate(-406.74 627.553)"/>
    </g>
  </g>
</svg>

Please tell me How do I add this SVG in the background like stripe.in or any other website has. Thanks!

Answer 1

Add the following code to your css file:

.your_elements_class{
  background-image: url("your_image_address.svg");
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image