React CSS inline vs CSS external styling

Question

I am have been seeing that some things do not work the same in react CSS inline styling vs CSS external sheet styling. I was having an issue with adding a background image to my react app. I could not get it to compile via the normal CSS way. It seemed that it could not resolve.

I ended up using an inline style approach that worked. I am not sure if this is the most efficient way to add background images.

What is the best way to add background images to react, inline or external.

Working code:

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;

None working Code via external CSS

App.css

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

I have tried with the leading forward slash and removing the quotes. I get the same error.

When you are using inline/same file css the react searches the public path which is '/' in this case and able to retrieve the image but not the case for external css file you need to give thproper path to the file in there like "../../path-to-image" — Sahil Paudel
– Sahil Paudel, Commented Mar 12, 2021 at 21:05
I tried this way background-image: "url(../../images/bg-pattern-top.svg)"; it did compile but did not apply to the background — PythonCoder1981
– PythonCoder1981, Commented Mar 12, 2021 at 21:51
Please use background-image: url("./images/lunchTime.png"); codesandbox.io/s/image-test-5b4i3?file=/src/styles.css:7-58 — Sahil Paudel
– Sahil Paudel, Commented Mar 12, 2021 at 21:53
"images/bg-pattern-top.svg" = "./images/bg-pattern-top.svg". Remember this is a CSS path so its relative to the location of your CSS file, not the root of the website. Also, can you move all your CSS to a simple external linked CSS file? Lastly, use of "var" in CSS isn't supported by many browsers, including IE1-11. — Stokely
– Stokely, Commented Mar 12, 2021 at 22:37
so to reach the image should I do "././images/bg-pattern-top.svg"? to reach the public/images/bg-pattern-top.svg ? — PythonCoder1981
– PythonCoder1981, Commented Mar 12, 2021 at 23:06

MB_ · Accepted Answer · 2021-03-13 17:12:31Z

1

Put your images folder in the 'public' directory as mentioned in the comments and to reach these images, uses:

process.env.PUBLIC_URL

examples :

<div style={{ background: `url(${process.env.PUBLIC_URL)/images/bg-pattern-top.svg` }}>
</div>



<img src={process.env.PUBLIC_URL + /images/bg-pattern-top.svg} alt="" />

edited Mar 13, 2021 at 17:12

answered Mar 13, 2021 at 17:05

MB_

1,7571 gold badge8 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

React CSS inline vs CSS external styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related