背景图像不会随其内容一起扩展

Question

我在这个项目中使用 Bootstrap 4 和 Sass。看起来背景图像不会随着它的内容一起扩展，而覆盖在小屏幕上会发生。我一直在寻找这样的问题，但不幸的是没有找到解决方案。下面是我的代码：

HTML

    #feedback-section {
      background: url(https://images.pexels.com/photos/34166/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      min-height: 500px;
      position: relative;

    .feedback-inner {
      padding-top: 5rem;
      padding-bottom: 2.5rem;
    }

      .feedback-overlay {
        background-color: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 500px;
      }

      #location-section {
        overflow-x: hidden;
      }

      cite img {
        border-radius: 100%;
        width: 85px;
        height: 80px;
        margin-top: 1rem;
        margin-right: 1rem;
        font-style: italic;
      }

      p {
        line-height: 1.25rem;
        margin-top: 3.75rem;
      }

      span {
        margin-left: 5px;
      }

      .feedback-inner {
        color: $font-color;
      }
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="feedback-section">
          <div class="feedback-overlay">
          <div class="feedback-inner">
          <h1 class="text-center">OUR CUSTOMERS CAN'T LIVE WITHOUT US</h1>
          <div class="container">
          <div class="row feedback-wrapper">
            <div class="col-md-4">
              <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
              <cite><img src="imgs/john-doe.jpeg" alt="">&mdash;<span>John Doe</span></cite>
              </blockquote>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                <cite><img src="imgs/jen-doe.jpeg" alt="">&mdash;<span>Jane Doe</span></cite>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                <cite><img src="imgs/janna-doe.jpeg" alt="">&mdash;<span>Janna Doe</span></cite>
            </div>
          </div>
          </div>
          </div>
          </div>
          </section>

这是它在 Iphone 5 屏幕上的样子：

Answer 1

更正您的 HTML 和 CSS，如下所示
此处示例 - https://jsfiddle.net/zakirbd/vf78phvf/1/

HTML 代码

<section id="feedback-section">
 <div class="feedback-overlay"></div>
 <div class="feedback-inner">
    <h1 class="text-center">OUR CUSTOMERS CAN'T LIVE WITHOUT US</h1>
    <div class="container">
        <div class="row feedback-wrapper">
            <div class="col-md-4">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat
                        voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia
                        perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                    <cite>
                        <img src="imgs/john-doe.jpeg" alt="">&mdash;
                        <span>John Doe</span>
                    </cite>
                </blockquote>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate,
                    repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis,
                    autem labore. Temporibus praesentium, dolorem.</p>
                <cite>
                    <img src="imgs/jen-doe.jpeg" alt="">&mdash;
                    <span>Jane Doe</span>
                </cite>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate,
                    repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis,
                    autem labore. Temporibus praesentium, dolorem.</p>
                <cite>
                    <img src="imgs/janna-doe.jpeg" alt="">&mdash;
                    <span>Janna Doe</span>
                </cite>
            </div>
        </div>
    </div>
</div>
</section>

CSS 代码

#feedback-section {
background: url(https://images.pexels.com/photos/34166/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 400px;
height: 100%;
position: relative;
padding-top: 5rem;
padding-bottom: 2.5rem;
color: #fff;
z-index: 1;
.feedback-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#location-section {
    overflow-x: hidden;
}
cite img {
    border-radius: 100%;
    width: 85px;
    height: 80px;
    margin-top: 1rem;
    margin-right: 1rem;
    font-style: italic;
}
p {
    line-height: 1.25rem;
    margin-top: 3.75rem;
}
span {
    margin-left: 5px;
}
.feedback-inner {
    color: #fff;
}
}