background-image does not display in my react application

Question

I am new to react and trying to make a simple component and set its background image using separate css file.

My App.js component:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="header-img">
        {/* <img src={require('./header.jpg')} alt='header-img'/> */}
      </div>
    </div>
  );
}

The CSS file:

*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.header-img{
  width: 100%;
  height: 426px;
  margin-top: 50px;
  background-image: url('./header.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: aquamarine; */
}

Here is CodeSandBox link https://codesandbox.io/s/clever-silence-cvhyt?file=/src/styles.css:0-309

Dennis Vash · Accepted Answer · 2020-07-25 16:24:45Z

5

Using files through pure CSS will work only on static files, so you need to put your images in the public folder.

That's because React applications that bootstrapped with create-react-app are using webpack for bundling the src folder, accessing a path like './header.jpg' through CSS won't bundle the file.

// public/header1.jpg

.header-img {
  background-image: url("./header1.jpg");
}

answered Jul 25, 2020 at 16:24

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

1 Comment

Ahmed Eldawody Over a year ago

Thanks a lot my friend ❤️

Collectives™ on Stack Overflow

background-image does not display in my react application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related