background-image: url(path/home-bg1.jpg);,background-image: url(path/home-bg2.jpg); Slider?

Herkese iyi forumlar,

Bitmiş bir web sitesi mevcut ancak slider ekleyeceğim şu şekilde bir şey mümkün mü?
background-image: url(path/home-bg1.jpg);,background-image: url(path/home-bg2.jpg);

şeklinde html kodu değiştirmeden background classında slider döndürebilirmiyiz

Css kodu

.background{
    background-image: url(../images/home-bg2.jpg);
    width: 100%;
    height: 100%;
    display: table;
    background-size: cover;
    text-align: center;
    background-position: center center;
    color: #fff;
}

Html Kodu

        <div class="background">
            <div class="menu">
                <div class="contactBar">
<img class="btn_click " src="source/frontend//images/email-icon-w.png" />
 <img class="btn_click_phone pointer" src="source/frontend//images/phone-icon-w.png" style="margin-left: 10px;" /> 
 <a href="#!"><img src="images/wp.png" style="margin-left: 10px;" />        </a>    
 <a href="#!"><img src="images/english.png" style="margin-left: 10px;" />        </a>    
 </div>
                <div class="menu_btn"> 
                    <img src="source/frontend//images/bar.png" alt="bar image">
                </div>
                <div class="logo">
                    <!-- fixed menu -->
                    <div class="contactBar">
                    
                    <img class="btn_click " src="source/frontend//images/email-icon-w.png" />
 <img class="btn_click_phone pointer" src="source/frontend//images/phone-icon-w.png" style="margin-left: 10px;" /> 
 <a href="#!"><img src="images/wp.png" style="margin-left: 10px;" />        </a>    
 <a href="#!"><img src="images/english.png" style="margin-left: 10px;" />        </a>    
                    
                    </div>
                    <div class="menu-fixed">
                      
                        <div class="fix_menu_btn"><img src="source/frontend//images/bar.png" alt="bar image"></div>
                    </div>
  
                </div>
                
              
             <img class="mainLogo" style="width:300px" src="logo.png" alt="logo image">
                <div class="arrow_down"><a id="explore" href="javascript:void(0);"><img src="source/frontend//images/arrow_down.png" alt="arrow down image" /></a>
                </div>
            </div>
        </div>

yardımcı olabilecek arkadaş varsa şimdiden teşekkürler
r10+

Background classinda animasyon atayarak (css3 animation) 2 farklı resmi döndürebilirsiniz.

.background{ 
animation:sliderarkaplan 1000ms linear infinite;
 width: 100%; 
height: 100%;
 display: table; 
background-size: cover;
 text-align: center;
 background-position: center center; 
color: #fff; } 
 
@keyframes sliderarkaplan {
 from { background-image: url(../images/home-bg1.jpg); }
 to { background-image: url(../images/home-bg2.jpg); }
 }

animation:sliderarkaplan 1000ms linear infinite;
Koddaki tanımlar 1000ms = 1 sn, linear zaman fonksiyonu (ease,ease-out,linear,cubic-bezier vs), infinite sonsuz döngü (forwards yaparsanız 1 kez döner)