简介图像背景和页脚图像背景是偏移的

Question

我希望我的页脚和介绍具有相同的背景但是当我这样做时，它的页脚背景图像略微偏移。这是因为介绍中的图片必须按比例放大以适应介绍的高度吗？这是我的代码。

简介HTML

<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Contact</h1>
                    <a href="#main" class="page-scroll"><i class="fa fa-chevron-down fa-4x"></i></a>
                </div>
            </div>
        </div>
    </div>
</header>

页脚HTML

<footer class="footer">
    <div class="container">
        <div class='row'>
            <div class="col-md-1 col-md-offset-5 social-media">
                <a href="http://twitter.com" class="btn btn-social-icon btn-twitter btn-large">
                    <i class="fa fa-twitter"></i>
                </a>
            </div>
            <div class="col-md-1 social-media">
                <a href="http://facebook.com" class="btn btn-social-icon btn-facebook btn-large">
                    <i class="fa fa-facebook"></i>
                </a>
            </div>
        </div>
    </div>
</footer>

简介CSS

.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/intro-bg.jpg) no-repeat bottom center fixed;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}

@media(min-width:767px) {
    .intro {
        height: 100%;
        margin-bottom: 25px;
    }

    .intro .intro-body .brand-heading {
        font-size: 80px;
    }

    .intro .intro-body .intro-text {
        font-size: 20px;
    }
}