Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed.
I have successfully implemented a similar method using an image from the internet (starting with 'https'). I have also attempted to use CSS to style the image, but unfortunately, it is still not showing up.
Here's the code snippet for setting the background with a local image (which is not visible):
background-image: url("/public/images/background.jpg");I have also tried this approach:
background: #eaeaea urlurl("/public/images/background.jpg");Meanwhile, the following code correctly displays the background using an image from the internet:
background: #eaeaea url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");After some consideration, I believe the issue lies in the URL format ('url('/path/path/img.jpe)' - it should be corrected accordingly.
// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';
.btn{
color: red;
}
.background {
background: #eaeaea url("/public/images/background.jpg");
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}