Background image not working after deployment [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
i have the following issue : background image was perfectly working, then after deployment it's not, the image is in a folder in the public folder here is my code :
react component :
function Header() {
return (
<div className="bannerContainer">
<div className="banner">
<h1>news reader</h1>
</div>
<h3>USER GUID</h3>
</div>
)
}
css styling :
.banner {
height: 20vh;
width: 100%;
background-image: url('/images/banner1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

Answer 1

'/images/banner1.png' is an absolute path. It will start at whatever is considered to be the root. This can be different for your local environment and deployed environment.
It's best practice to use relative paths, so that it is not dependent on where the root starts:
background-image: url('../relative/path/to/banner1.png'); /* example 1 */
background-image: url('./also/relative/path/to/banner1.png'); /* example 2 */
EDIT: To test whether the problem is with your url, replace your path with a regular image link we know works. Something like:
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
If the image does appear in the background, then the problem is definitely with your image path.
In that case I'd recommend playing around with it. Place the image in the same folder as the CSS file trying to access it, and see if you can get any success there before moving the image further away.