Раздетый эффект для фона

Question

Я пытаюсь создать это Что я нацеливаю на то, чтобы оно выглядело , но я изо всех сил стараюсь сохранить фон на месте, когда на небольших устройствах. Как сделать так, чтобы фон оставался полосатым без его перемещения или размера? Я хочу, чтобы полосы соответствовали размеру изображений 320x400 и изменяли размеры вместе с изображениями.

/* background of employee list */

    .employee-list {
        background-color: rgba(154, 205, 102, 1);
        background-image: linear-gradient(90deg, rgba(154, 205, 102, 1) 25%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.2) 50%, rgba(154, 205, 102, 1) 50%, rgba(154, 205, 102, 1) 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)100%);
        background-size: 560.00px 560.00px;
    }
/* Position of the  team members */
    .team-member {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: top;
        background-color: rgba(0, 0, 0, 0.2);
    }

/* Mobile position for team members */

    @media only screen and (min-width: 320px) {
        .team-member {
            width: 50%;
        }
    }

    @media only screen and (min-width: 480px) {
        .team-member {
            width: 32%;
        }
    }

    @media only screen and (min-width: 600px) {
        .team-member {
            width: 26%;
        }
    }

    @media only screen and (min-width: 860px) {
        .team-member {
            width: 21%;
        }
    }

    @media only screen and (min-width: 1120px) {
        .team-member {
            width: 11%;
        }
    }

    .team-member:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(154, 205, 102, 0.5);
    }

    .team-member img {
        /*position: absolute;
      z-index: 1;*/
        width: 100%;
    }

    .team-member__desc {
        display: none;
        background-color: rgba(154, 205, 102, 0.8);
        color: #fff;
        width: 100%;
        padding: 0.5rem;
    }

    .team-member:hover .team-member__desc {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
    }

  

      <section class="section pt-0 pb-3">
    <!-- employee 1 -->
            <div class="employee-list grid flush">
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
   <!-- employee 1 image-->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
   <!-- employee 1 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>7</h5>
                        <p class=''></p>
                    </div>
                </div>
    <!-- employee 2 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
   <!-- employee 2 image-->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
   <!-- employee 2 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>8</h5>
                        <p class=''></p>
                    </div>
                </div>
    <!-- employee 3 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
   <!-- employee 3 image-->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
   <!-- employee 3 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>Aylmer Carson</h5>
                        <p class=''>Printing & Production</p>
                    </div>
                </div>
    <!-- employee 4 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
   <!-- employee 4 image-->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
   <!-- employee 4 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>Francis McAfee</h5>
                        <p class=''>Production Manager</p>
                    </div>
                </div>
    <!-- employee 5 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
   <!-- employee 5 image-->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
                    <div class='team-member__desc'>
   <!-- employee 5 text-->
                        <h5 class='feature-list__title'>Gemma Smith</h5>
                        <p class=''>Manager</p>
                    </div>
                </div>
    <!-- employee 6 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
  <!-- employee 6 Image -->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
   <!-- employee 6 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>Paul Kane</h5>
                        <p class=''>Printing & Production</p>
                    </div>
                </div>
    <!-- employee 7 -->
                <div class='one-ninth feature-list__item  palm-one-whole team-member'>
    <!-- employee 7 Image -->
                    <img src='https://dummyimage.com/320x400' alt='' title='' />
    <!-- employee 7 text-->
                    <div class='team-member__desc'>
                        <h5 class='feature-list__title'>Peter McCaughan</h5>
                        <p class=''>Managing Director</p>
                    </div>
                </div>
            </div>
        </section>

Answer 1

Используйте сетку для внешнего контейнера и установите grid-template-column для повторения (7, 1fr) и grid-template-row на любую высоту, какую хотите. Это должно предотвратить обертывание. Вы не можете сохранять изображения и размер сетки фиксированными при минимальной высоте 400 и минимальной ширине 320, так как это повлияет на скорость отклика при просмотре на экране меньшего размера. Посоветует вам сделать изображение отзывчивым, чтобы оно соответствовало размеру его контейнера.