造型我的手风琴：动画和背景

Question

我正在为带有自举程序的网站设计手风琴，但是在样式设计上我花了很多时间。

这是设计（尚未正确组织）：

https://i.stack.imgur.com/anZ4k.png

我想使折叠的外观看起来像是背景图像（底部是圆形的）。我希望它充满生气，好像背景刚刚伸展一样。像这样：

https://i.stack.imgur.com/96XWt.png

我在网上找不到任何示例或解决方案。

<section class="mobileSection">
    <section id="aboutMobile">
        <header class="hamNav">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12" id="accordionNav">
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
    <div class="panel panel-default" id="historyPanel">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title unbold">
                <button class="collapsed" data-toggle="collapse" id="historyHamNav" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    <img src="images/clock.png" width="80" id="mobileHistoryIcon"/> <div id="historySpan"><span>היסטוריה</span></div>
                </button>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body" id="historyCard">
                <p>
                    תכנית "בשבילי" הוקמה על ידי ארגון ג'וינט הפועל למען קידום איכות החיים, שוויון הזדמנויות וצמצום פערים בחברה הישראלית.
                </p>
                <p>
                    בשנת 2014 הוטמעה התכנית במלואה במשרד העבודה, הרווחה והשירותים החברתיים בשירות לנוער, צעירים וצעירות.
                </p>
                <p>
                    כיום פועלת התכנית על רצף המענים של תכנית 'יתד', התכנית הלאומית לצעירים במצבי סיכון בפריסה ארצית.
                </p>
                <p>
                    ראש תחום בשירות מתבגרים צעירות וצעירים במשרד הרווחה: אורית להב
                    <br />מנהלת מקצועית מטעם ג'וינט אשלים: יעל בן נון
                </p>
            </div>
        </div>
    </div>

    $('.panel-collapse').on('shown.bs.collapse', function (e) {
    var $panel = $(this).closest('.panel');
    $('html,body').animate({
        scrollTop: $panel.offset().top-300
    }, 500);
}); 

$('#accordion, #bs-collapse')
    .on('show.bs.collapse', function (a) {
            $(a.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function (a) {
        setTimeout(function () {
            $(a.target).prev('.panel-heading').removeClass('active');
        }, 350)
    });

       .hamNav {
        margin-top: 80px;
    }

    button {
        border: none !important;
        background-color: transparent;
        width: 100vw;
        text-align: right
    }

        button:visited {
            border: none;
        }


    #historyCard {
       background-color: #e5b10a;
    }

    #accordion .panel #historyHamNav {
        margin-top: 0px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        background: url("../images/hamNavHistory.png") center bottom no-repeat;
        background-size: cover;
        margin-top:10px;
        transition:ease-in;
    }

    #accordion .panel #whoWeAreHamNav {
        background: url("../images/hamNavWhoWeAre.png") center bottom no-repeat;
        background-size: cover;
        margin-top: -78px;
        z-index: -2;
    }

    #accordion .panel-title button:before {
        background-color: #ffb59b;
        background-size: cover;
        margin-top: -78px;
        z-index: -4;
    }

    #accordion .panel #numbersHamNav {
        background: url("../images/hamNavNumbers.png") center bottom no-repeat;
        background-size: cover;
        margin-top: -75px;
        z-index: -6;
    }

    #accordion .panel #sayingHamNav {
        background: url("../images/hamNavSaying.png") center bottom no-repeat;
        background-size: cover;
        margin-top: -75px;
        z-index: -8;
    }

    #accordion .panel #contactHamNav {
        background: url("../images/hamNavContact.png") center bottom no-repeat;
        background-size: cover;
        margin-top: -75px;
        z-index: -10;
    }

    #historyPanel .active  {
        background-color: #ffb59b;
    }


    #whoWeArePanel {
        margin-top: -50px;
    }

    #accordion .panel-heading {
        padding: 0;
        position: relative;
    }

    #accordion .panel-body#historyCard {
        background: url("../images/hamNavHistory.png") center bottom no-repeat;
        background-size: cover;
    }

    .fixed-bg{
        display:none;
    }

    #accordionNav{
        margin-top:-90px;
        padding:0px;
    }

    #headingOne {

    }

    #mobileHistoryIcon{
        margin-top:26px;
        margin-right:-450px;
    }

    #mobileWhoWeAreIcon {
        margin-top: 25px;
        margin-right: -450px;
    }

    #mobileNumbersIcon {
        margin-top: 24px;
        margin-right: -450px;
    }

    #mobileSayingIcon {
        margin-top: 24px;
        margin-right: -450px;
    }

    #mobileContactIcon {
        margin-top: 24px;
        margin-right: -450px;
    }

现在我只能实现样式，而不能达到我想要的动画和样式。