How to add an image in React js in css

Question

How to add an image in React js in CSS file but

background-image: ("../public/%PUBLIC_URL%/img/header-bg.webp"); This code is not run in Browser

header.masthead {
    padding-top: 10.5rem;
    padding-bottom: 6rem;
    text-align: center;
    color: #fff;
    background-image: ("../public/%PUBLIC_URL%/img/header-bg.webp");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Website!</div>
<div className="masthead-heading text-uppercase">It's Nice To Meet You</div>
<a className="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</header>

It is because you are not getting right path/url. Try `background-image: ("/img/header-bg.webp");` or try to find url of existing image using right click on any exiting image and open in another tab and check url ? — Niklesh Raut, May 03 '21 at 05:29
There are few ways to achieve this. Check out https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react and https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles — Siddhant Varma, May 03 '21 at 06:34

score 0 · Answer 1 · edited May 03 '21 at 07:36

0

background-image: url("/img/header-bg.webp");

edited May 03 '21 at 07:36

janw

8,758
11
40
62

answered May 03 '21 at 06:32

Abu Dujana Mahalail

1,547
1
8
21

How to add an image in React js in css

1 Answers1