Changing background on different parts of 3 x 3 grid

Changing background on different parts of 3 x 3 grid

I have a 3 x 3 grid - each part of the grid has a different background image. I would like to change 1 section of the grid background after say 5 seconds - fade in a new background. Three seconds later I would like a different random part of the grid to change its background.

The following html, css and jQuery changes the background image on each container but to the same background - not what I'm trying to achieve - any help would be greatly appreciated.

Here is the html:
  1. <body>
  2. <div class="grid">
  3. <div class = "row1">
  4.         <div class = "container column1"></div>
  5.         <div class = "container column2"></div>
  6.         <div class = "container column3"></div>
  7.     </div><!--end of row -->
  8.     <div class = "row2">
  9.         <div class = "container column1"></div>
  10.         <div class = "container column2"></div>
  11.         <div class = "container column3"></div>
  12.     </div><!--end of row -->
  13.     <div class = "row3">
  14.         <div class = "container column1"></div>
  15.         <div class = "container column2"></div>
  16.         <div class = "container column3"></div>
  17.     </div><!--end of row -->
  18. </div>


  21. </body>
This the css so far - I have only put a background on the top left so far
  2. * {
  3. margin: 0px;
  4. padding: 0px;
  5. box-sizing:border-box;
  6. }
  7. .grid {
  8. margin-left: auto;
  9. margin-right: auto;
  10. width: 900px;
  11. height: 300px;
  12. background-color:#22F501;
  13. }
  14. .container {
  15. float: left;
  16. width: 300px;
  17. height: 300px;
  18. background-color: #E4F903;
  19. border-top: 20px solid #B6B6B6;
  20. border-right: 20px solid #B6B6B6;
  21. border-bottom: 20px solid #B6B6B6;
  22. }
  23. .container:first-child {
  24. border-left: 20px solid #B6B6B6;
  25. }
  26. .row1 .column1 {
  27. background-image: url(images/maatariki_main.jpeg);
  28. background-size: 280px 280px;
  29.     background-repeat: no-repeat;
  30. }
This jQuery will change the background but it will change it for all of the containers to the same background -p not the desired result.

  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  3. <script type="text/javascript"> 
  4. $(document).ready(function(){
  5. $(function () {
  6.     var container = $('.container');
  7.     var backgrounds = [
  8.       'url(http://static.jsbin.com/images/jsbin_static.png)', 
  9.       'url(http://static.jsbin.com/images/popout.png)'];
  10.     var current = 0;

  12.     function nextBackground() {
  13.         container.css(
  14.             'background',
  15.         backgrounds[current = ++current % backgrounds.length]);

  17.         setTimeout(nextBackground, 5000);
  18.     }
  19.     setTimeout(nextBackground, 5000);
  20.     body.css('background', backgrounds[0]);
  21. });
  22. });