title: Make a looping div background fade into different colors
body: <p>Im trying to make the background of a div change colour 4 or 5 times continuously, but dont really know where to start. I need the timing to be quite precise as i have to also fade images at the same time on top of the background colour.</p>
  
  <p>Whats the best way to do this? jQuery or css?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong>
  I have been able to make the background property change color using CSS animation and keyframes like so:</p>
  
  <pre><code>&lt;div class="fading"&gt;&lt;/div&gt;
  
  .fading {
      height:200px;
      width:100%;
      background: black;
      animation: fading 30s infinite;
      -webkit-animation: fading 30s infinite;
      border-radius:5px;
  }
  @keyframes fading {
      0%   { background: black; }
      33%  { background: red; }
      66%  { background: blue; }
      100% { background: black; }
  }
  
  @-webkit-keyframes fading {
      0%   { background: black; }
      33%  { background: red; }
      66%  { background: blue; }
      100% { background: black; }
  }
  </code></pre>
  
  <p>However im not sure whether this will keep the same time as jquery would, which ill be using to fade in and out images??</p>
  
  <p>Also im worried about what will happen on older browsers are there any fail safes i should be looking at using?</p>