CODEWITHSUNDEEP
javascriptcssreactjsvisual-studiofrontend
YERAN L CONCEPCION-CONCEPCION
YERAN L CONCEPCION-CONCEPCION

Reputation: 3

GIF as background in ReactJS

I am trying to set a background image that is GIF in my react js application but I have tried varying methods and any of them seem to work. Any suggestions?

This is my complete code my problem its most at the first line that creates the background image(backgroundH)

import React from "react";
import "../../src/App.css";
import "./Home.css";
import backgroundH from "../Images/SyncLink Home v.4.gif";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";

function Home() {
  return (
    <div
      class="bk_Img"
      style={{
        backgroundImage: "url(" + backgroundH + ")",
        backgroundSize: "cover",
        height: "100vh",
      }}
    >
      <ol className="homeButtons">
        <Link to="/LogIn" style={{ textDecoration: "none", color: "white" }}>
          <li>
            <Button className="btn--secondary" variant="primary">
              LOG IN
            </Button>
          </li>
        </Link>
        <Link to="/SignUp" style={{ textDecoration: "none", color: "white" }}>
          <li>
            <Button className="btn--secondary" variant="primary">
              SIGN UP
            </Button>
          </li>
        </Link>
        <Link
          to="/ContactUs"
          style={{ textDecoration: "none", color: "white" }}
        >
          <li>
            <Button className="btn--secondary" variant="primary">
              HELP
            </Button>
          </li>
        </Link>
      </ol>
    </div>
  );
}

export default Home;

Upvotes: 0

Views: 7287

Answers (1)

Ananth
Ananth

Reputation: 797

The problem here might be due to the space in the gif path. You encounter issues rendering images that contain spaces in their names. So you have to encode it so that it can be rendered properly.

The encodeURI() function is used to encode a URI.

This function encodes special characters, except: , / ? : @ & = + $ # (Use > encodeURIComponent() to encode these characters).

More details can be found here

By making use of encodeURI() function the path "../Images/SyncLink Home v.4.gif" becomes "../Images/SyncLink%20Home%20v.4.gif"

If the above approach is not working, then you need to check if the gif path is broken

Upvotes: 1

Related Questions