Background img dosent show after deployment

Support
1

Hi,

I am having trouble showing a background img in my react-app when deploying it to Netlify.
The img is located in src folder and we are fetching it from a class called .hero-img in the index.css file.
We think that the problem is the path and have tried the relative URL method.

Here’s the HTML:


 <div className="card text-white">
                <div className="hero-img"> </div>
                <div className="card-img-overlay d-flex flex-column justify-content-center align-items-center">
                    <h2 className="hero-text lg-m-3">GRÖNA VÄXTER SER <br /> TILL SÅ ALLA FÅR  <br /> GRÖNA FINGRAR. </h2>
                    <Link to="./products">
                        <button className=" btn-color">KÖP NU</button>
                    </Link>
                </div>
            </div>

Here’s the CSS:

.hero-img {
  height: 700px;
  background-image: url('./Images/startbild.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  opacity: 50%;
}

The site name is https://gronavaxter.netlify.app/ and the Github link is GitHub - AvilinP/gronavaxter

Many thanks for the help!

2

Hi @agnusburger

The opacity is set to 1%

Screenshot 2021-08-24 7.56.16 PM

1 Like
3

Thank you! I works fine now, I didn’t know that the opacity had changed.
I found a good explanation here if someone else have the same problem:

1 Like
4

Thanks for sharing the link :+1: