Bootstrap carousel's images don't resize

Question

I have a carousel with three photos. These unfortunately doesn't resize. I tried many solutions but none is working. I have tried this and this. What should I do? I'm using Bootstrap 3.3.7 Here is my CSS:

.masthead {
    display: table;
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    background: transparent url("../img/bg.jpg") no-repeat fixed 0px 0px ;
    z-index: 800;
    background-color: #000;
}

.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.fade-carousel .slides .slide-1 {
    background-image: url("..//MyImg/Background2.png");
}

.fade-carousel .slides .slide-2 {
    background-image: url("..//MyImg/Background1.png");
}

.fade-carousel .slides .slide-3 {
    background-image: url("..//MyImg/Background3.png");
}

And my HTML:

<div class="masthead">
    <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">


        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#bs-carousel" data-slide-to="1"></li>
            <li data-target="#bs-carousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item slides active">
                <div class="slide-1"></div>
                <div class="hero">
                    <hgroup>
                        <h2 class="col-xs-12">automations</h2>
                        <h3 class="col-xs-12">PLC/SCADA/HMI for any industrial proces</h3>
                    </hgroup>
                    <button class="btn btn-hero btn-lg" role="button">See all features</button>
                </div>
            </div>
            <div class="item slides">
                <div class="slide-2"></div>
                <div class="hero">
                    <hgroup>
                        <h1 style="text-align: left">Industrial IT solutions</h1>
                        <h3 style="text-align: left">the entire spectrum of automation</h3>
                    </hgroup>
                    <button style="float: left;" class="btn btn-hero btn-lg" role="button">See all features</button>
                </div>
            </div>
            <div class="item slides">
                <div class="slide-3"></div>
                <div class="hero">
                    <hgroup>
                        <h1>APPLICATIONS</h1>
                        <h3>software projects locally and in the cloud</h3>
                    </hgroup>
                    <button class="btn btn-hero btn-lg" role="button">See all features</button>
                </div>
            </div>
        </div>
    </div>
</div>