Is there a reason as to why my background image is repeating when I put it in production in Netlify but not in react itself?

I have completed a project that has background images and when I'm in localhost the background image fits perfectly and does not repeat but when I try to add it to Netlify the website's background images does not fit perfectly and starts repeating.

crew CSS file:

.main-content-crew{
    height: 100vh;
    background-image: url('../../../images/crew/background-crew-desktop.jpg');
    width: 100vw;
}

the web page in localhost: localhost pic

the netlify webpage: Netlify pic

home page CSS file:

.main-content-home{
    background: url('../../images/home/background-home-desktop.jpg');
    min-height: 100vh;
    width: 100vw;
}

Localhost pic: Localhost pic

Netlify pic: Netlify pic