How to access a static image in the public folder from a css file of a React component?

Question

React

There is a Header component

import React from "react";
import './Header.css';



export default class Header extends React.Component{

    render() {
        return (
            <header className="header" id="header">
                <div className="container">
                    <div className="row align-items-center">

                        <div className="col-2 offset-1 col-sm-2 offset-sm-1  col-md-4 offset-md-0 ">
                            <div className="header-logo"></div>
                        </div>

                        <div className="col-9 col-sm-9 col-md-8">
                            <div className="header-contacts">
                                <div className="header-contacts__phones">
                                    <a href="tel:[phone]" className="header-contacts__phone">38 [phone]</a>
                                    <a href="tel:[phone]" className="header-contacts__phone">38 [phone]</a>
                                </div>

                                <a className="button header-contacts__button button__cta" href="#popup">
                                    <img src="/img/header/header-btn-icon.png" alt="phone-icon-btn"/>
                                    <span className="hidden-mobile hidden-sm">Заказать звонок</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
}

In JSX, in the img tag, we refer to the image that is stored in the public folder - everything is fine, the image is visible.
If we access an image from a css file that is connected to the Header component

.header-logo{
    width: 191px;
    height: 61px;
    background: url('/img/header/header-logo.png') 0 center; // ошибка !!!
    background-size: cover;
}

I get an error

./src/components/Header/Header.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss !./src/components/Header/Header.css)
Error: Can't resolve '/img/header/header-logo.png' in

1) The question is why can't I access the image that is in the public folder from css?
The image must be connected via css - I use it for the background of the section and not only

2) If the image is in the folder of the Header component - everything is fine - the logo is displayed

3) What is the best way to store images in general?
- all images in the folder (public/img/header)
- in the specific component to which the images belong? (Header / img)

The option in which we separately import the image into Header.js and connect it through inline styles is not suitable, I just want it to be written in a separate style file.
I will be grateful for the answers!
Logo set in css

Answer 1

Your path is not correct to the karinka in styles.
Perhaps the webpack settings are not configured, or env.
You can write the absolute path to the image, through ../../, etc.
Or create an .env file with the parent path. "NODE_PATH=src/"

Answer 2

Since you are using webpack, you need to import the image as a module, and then use

import React from 'react'
import Logo from 'путь_к_картинке'

...... 
<img src={Logo} />