React js Background Image

Question

I am currently working on a simple react image that will have profile pictures of different user. I have run into an issue when I try to set the background image. I will have two background images but I am unable to place any. The images are in my public/images/ but nothing is showing up in the webpage.

I am adding the image in body{} in the CSS file "App.css".

App.css

body {
  margin: 0;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  background-image: "url(/images/bg-pattern-top.svg)";
  background-size: contain;
  background-position: top;
}

App.js

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  return (
    <div>
    <PorfileCard/>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Remove the quotes around "url(/images/bg-pattern-top.svg)". Also please read this page in its entirety. stackoverflow.com/help/how-to-ask. Also to help you debug in the future: open the chrome developer tools and inspect the body element and look at the CSS. It will help you find out of the CSS isn't getting applied or if you have invalid rules. — Andy Ray
– Andy Ray, Commented Mar 11, 2021 at 19:03
Thanks I updated the question with more images of the google chrome dev tool and react tool. — PythonCoder1981
– PythonCoder1981, Commented Mar 11, 2021 at 20:04
Re-read the first sentence in my comment :P Also, the error is right there in the CSS rule, you shouldn't include a screenshot of it, you should get familiar with how to see and debug the error — Andy Ray
– Andy Ray, Commented Mar 11, 2021 at 20:07
The problem is the placement of the quotes per @AndyRay. You have: background-image: "url(/images/bg-pattern-top.svg)"; it should be background-image: url(/images/bg-pattern-top.svg); I would also remove the leading slash as that could cause a path error depending on server setup. — Bryce Howitson
– Bryce Howitson, Commented Mar 11, 2021 at 20:08
removing the quotes has created a "Failed to compile" error. Changed it to this background-image: url(images/bg-pattern-top.svg); and the error is Error: Can't resolve '/images/bg-pattern-top.svg' — PythonCoder1981
– PythonCoder1981, Commented Mar 11, 2021 at 20:12

PythonCoder1981 · Accepted Answer · 2021-03-12 19:54:58Z

3

The only way I was able to resolve this was via using inline styling on the main div in app.js.

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  const mystyle = {
    backgroundImage: "url(/images/bg-pattern-top.svg)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"
    
  }
  return (
    <div style={ mystyle }>
     <PorfileCard/>
    </div>
  );
}

export default App;

answered Mar 12, 2021 at 19:54

PythonCoder1981

46311 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian Joseph · Accepted Answer · 2024-06-24 17:40:18Z

0

It's definitely too late to help you but i was also facing the same problem and google bought me here finally fixed it you just have to add a dot "." in front the path like you're importing a module in a .js file In your case the fix is:

background-image: url("./../public/images/bg-pattern-top.svg");

:) Hope this helps someone

answered Jun 24, 2024 at 17:40

Fabian Joseph

788 bronze badges

Collectives™ on Stack Overflow

React js Background Image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related