 <p>You can try swapping backgrounds like so:</p> <p>Create CSS Class for each background and include transitions as part of the ruleset:</p> <pre><code>.background-1 { background: url('background-1.jpg'); -webkit-transition: background 500ms linear; -moz-transition: background 500ms linear; -o-transition: background 500ms linear; -ms-transition: background 500ms linear; transition: background 500ms linear; </code></pre> <p>}</p> <p>Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.</p> <p>The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:</p> <pre><code>setInterval(function() { if($('#background').hasClass('background-1')) { $('#background').addClass('background-2'); setTimeout(function() { $('#background').removeClass('background-1'); }, 1000); } else if($('#background').hasClass('background-2')) { $('#background').addClass('background-1'); setTimeout(function() { $('#background').removeClass('background-2'); }, 1000); } }, 2000); </code></pre> <p>Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this. </p> <p>I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out <a href="http://www.theaccordance.com" rel="nofollow">here</a>. </p> <p><strong>Update:</strong> Forgot to mention, make sure to declare one of the background classes in your Div element:</p> <pre><code>&lt;div id="background" class="background-1"&gt;&lt;/div&gt; </code></pre>