Stellar.js - multiple backgrounds inside one element

Question

I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..

Default output look like this:

  .photo {
   background-attachment: fixed;
   background-position: 50% 0;
   background-repeat: no-repeat;
   height: 450px;
   position: relative;
  }
  .photo span {
   bottom: 0;
   color: white;
   display: block;
   left: 50%;
   margin-left: -640px;
   font-size: 38px;
   padding: 10px;
   position: absolute;
   text-shadow: 0 2px 0 black, 0 0 10px black;
   width: 1280px;
  }
  .summer {
   background-image: url(images/1.png);
  }
  .autumn {
   background-image: url(images/2.png);
  }
  .winter {
   background-image: url(images/3.png);
  }
  .spring {
   background-image: url(images/4.png);
  }

         <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
  <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
  <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
  <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
  <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
  <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
  <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
  <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>

But I want it to be something like that

  .photo {
   background-attachment: fixed;
   background-position: 50% 0;
   background-repeat: no-repeat;
   height: 450px;
   position: relative;
  }
  .photo span {
   bottom: 0;
   color: white;
   display: block;
   left: 50%;
   margin-left: -640px;
   font-size: 38px;
   padding: 10px;
   position: absolute;
   text-shadow: 0 2px 0 black, 0 0 10px black;
   width: 1280px;
            background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
  }

<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>

I'm quite new to this and need some help. Maybe it just couldn't work as I want?