В моем CSS свойство размера фона не работает должным образом, даже если я установил после bg img?

Question

В приведенном ниже коде я дал класс для раздела и использовал этот класс на листе CSS, но фоновое изображение не охватывает весь раздел, оно охватывает только 25% раздела.Размер моего изображения 3000 x 2000.

.section-testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/back-customers.jpg);
  color: #fff;
  background-attachment: fixed;
  background-size: cover;
}

<section class="section-testimonials">
  <div class="row">
    <h2>Our customers can't live without us</h2>
  </div>
  <div class="row>">
    <div class="col span-1-of-3">
      <blockquote>
        Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
        <cite>
          <img src="https://techmadeplain.com/img/2014/3000x2000.png">Alberto Duncan
        </cite>
      </blockquote>
    </div>
  </div>
</section>

Answer 1

удалить свойство background-attachment и задать фону высоту

.section-testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2071937/3000/2000/m1/fpnw/wm0/curved_tv_3-.jpg?1482926954&s=79713e1a30148fedde42d2396fe9fc8a);
  color: #fff;
  background-size: cover;
  position: absolute;
  width: 100%;
  height:100%;
}

<section class="section-testimonials">
  <div class="row">
    <h2>Our customers can't live without us</h2>
  </div>
  <div class="row>">
    <div class="col span-1-of-3">
      <blockquote>
        Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
        <cite>
          <img src="https://image.flaticon.com/icons/svg/23/23656.svg" style="width:30px">Alberto Duncan
        </cite>
      </blockquote>
    </div>
  </div>
</section>

Answer 2

Вот пример того, как это сделать.

Ключевые части, background: ..... center;, с помощью которых изображение начнет расти от центра контейнера.Попробуйте удалить центр, и вы увидите, что в левом верхнем углу изображения BG сечения.

.section-testimonials {
      background: url(https://techmadeplain.com/img/2014/3000x2000.png) no-repeat center;
      color: #fff;
      background-size: cover;
    }

    <section class="section-testimonials">
      <div class="row">
        <h2>Our customers can't live without us</h2>
      </div>
      <div class="row>">
        <div class="col span-1-of-3">
          <blockquote>
            Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
            <cite>
             Alberto Duncan
            </cite>
          </blockquote>
        </div>
      </div>
    </section>

Answer 3

body {
margin: 0;
}
.section-testimonials {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://images.wallpaperscraft.com/image/beautiful_scenery_mountains_lake_nature_93318_3000x2000.jpg);
    color: #fff;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    width: 100%;
}

<section class="section-testimonials">
  <div class="row">
      <h2>Our customers can't live without us</h2>
  </div>    
  <div class="row>">
      <div class="col span-1-of-3">
          <blockquote>
              Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
              <cite>
                  <img src="https://techmadeplain.com/img/2014/3000x2000.png">Alberto Duncan
              </cite>
          </blockquote>
      </div>   
 </div>
 </section>

Answer 4

Просто не установлено background-attachment свойство

.section-testimonials {
      background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/back-customers.jpg);
      color: #fff;
      background-attachment: unset;
      background-size: cover;
    }

Answer 5

Вы можете попробовать это .. Я надеюсь, что это будет работать

.section-testimonials {
         background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/back-customers.jpg);
        color: #fff;
        background-attachment: fixed;
        background-size: 100%;
        position: absolute;
      }

<section class="section-testimonials">
      <div class="row">
          <h2>Our customers can't live without us</h2>
      </div>    
      <div class="row>">
          <div class="col span-1-of-3">
              <blockquote>
                  Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
                  <cite>
                      <img src="https://techmadeplain.com/img/2014/3000x2000.png">Alberto Duncan
                  </cite>
              </blockquote>
          </div>   
     </div>
 </section>

Answer 6

удалить свойство background-attachment

Answer 7

.section-testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/back-customers.jpg);
  color: #fff;
  background-attachment: fixed;
  background-size: cover;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  }

<section class="section-testimonials">
  <div class="row">
    <h2>Our customers can't live without us</h2>
  </div>
  <div class="row>">
    <div class="col span-1-of-3">
      <blockquote>
        Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
        <cite>
          Alberto Duncan
        </cite>
      </blockquote>
    </div>
  </div>
</section>