title: How do I add an svg image in background using react?
body: <p>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 <code>&lt;img src="background.svg" class="yourCSSClass"&gt;</code>
  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</p>
  
  <p>Here is the App.js
  `</p>
  
  <pre><code>import React, { Component } from 'react';
      import './App.css';
      import NameForm from './Form';
  
      class App extends Component {
        render() {
          return (
            &lt;div className="App"&gt;
              &lt;div className="Heading"&gt;
      &lt;h1&gt;Welcome to the Sudistic&lt;/h1&gt;
      &lt;h3&gt;A small to contribution to the programming community.&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h4&gt;Log In to your Account&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;NameForm /&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
          );
        }
      }
  
      export default App;
  </code></pre>
  
  <p>Here is the App.css</p>
  
  <pre><code>    .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);
  }
  `
  </code></pre>
  
  <p>Here is the Form.js</p>
  
  <pre><code>    import React from 'react';
  
  import './form.css';
  
  
  export default class NameForm extends React.Component {
  
  
      render() {
        return (
          &lt;div className="container"&gt;
          &lt;div className="email"&gt;
          &lt;form&gt;
            &lt;label&gt;
             &lt;input type="email" placeholder="Enter your email" /&gt;
            &lt;/label&gt;
            &lt;/form&gt;
            &lt;/div&gt;
            &lt;div className="password"&gt;
                &lt;form&gt;
                &lt;label&gt;
             &lt;input type="password" placeholder="Passowrd" /&gt;
            &lt;/label&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;div className="btn"&gt;
                &lt;input type="submit" value="Login" /&gt;
            &lt;/div&gt;
            &lt;h5&gt;Don't have an account?&lt;a href='/'&gt;Register now&lt;/a&gt;&lt;/h5&gt;
          &lt;/div&gt;
        );
      }
    }
  </code></pre>
  
  <p>Here is the form.css</p>
  
  <pre><code> .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);
      }
  </code></pre>
  
  <p>And This is my background SVG</p>
  
  <pre><code>    &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2205.482 1074.229"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .cls-1 {
          fill: url(#linear-gradient);
        }
  
        .cls-2, .cls-3 {
          fill: #fff;
        }
  
        .cls-3 {
          opacity: 0.1;
        }
      &lt;/style&gt;
      &lt;linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"&gt;
        &lt;stop offset="0" stop-color="#38e870"/&gt;
        &lt;stop offset="1" stop-color="#b8d3c1"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;g id="background" transform="translate(406.74)"&gt;
      &lt;rect id="Rectangle" class="cls-1" width="1440" height="1024"/&gt;
      &lt;g id="Group_7" data-name="Group 7"&gt;
        &lt;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)"/&gt;
        &lt;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)"/&gt;
        &lt;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)"/&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Please tell me How do I add this SVG in the background like stripe.in or any other website has.
  Thanks!</p>